如何避免TailwindCSS清除动态生成的类？无需复用完整类

你遇到的问题是Tailwind静态扫描机制导致的——它没法通过TypeScript联合类型推断出text-${size}最终生成的完整类，所以会把这些动态类标记为未使用并清除。以下几种方案可以不用写冗长的三元判断解决这个问题：

1. 配置Tailwind安全列表（safelist） #

直接在配置文件里指定需要保留的类，强制Tailwind把这些类打包进最终CSS，不管代码里有没有直接写完整类：

// tailwind.config.js
module.exports = {
  safelist: [
    'text-sm',
    'text-base',
    'text-lg'
  ],
  // 其他配置项...
}

如果有批量的类符合相同模式，还能用正则简化：

safelist: [
  {
    pattern: /^text-(sm|base|lg)$/,
  }
]

2. 封装类型安全的映射函数 #

用对象映射替代拼接，既保持TypeScript的类型约束，又让Tailwind能扫描到完整类：

type Size = "sm" | "base" | "lg";

const getTextSizeClass = (size: Size) => {
  const classMap = {
    sm: "text-sm",
    base: "text-base",
    lg: "text-lg"
  };
  return classMap[size];
};

// 组件里直接用
className={getTextSizeClass(size)}

3. 直接用对象映射 #

如果不需要函数封装，直接定义映射对象也可以，写法更清爽：

type Size = "sm" | "base" | "lg";
const textSizeClasses = {
  sm: "text-sm",
  base: "text-base",
  lg: "text-lg"
};

// 组件里使用
className={textSizeClasses[size]}

内容的提问来源于stack exchange，提问作者SAMI