动态拼接类名（如className={text-${color}-600}）在Tailwind v3+中必然失效，因其JIT编译器仅静态扫描源码中完整、连续的字面量类名，不执行JS插值、不推测变量值，故无法生成对应CSS规则；预定义完整类名数组或配置safelist（针对不可穷举场景）是合规解法。
动态拼接类名（如 className={`text-${color}-600`}）在 Tailwind v3+ 中必然失效，不是配置问题，也不是环境 bug，而是 JIT 编译器根本不会执行 JS 表达式——它只认源码里写死的、完整的字符串字面量。
Tailwind 的 JIT 编译器不运行 JavaScript
Tailwind 构建时不做任何 JS 解析或变量求值。它扫描的是你源文件中“静态可见”的类名字符串，比如 text-red-600、hover:bg-blue-500。而 text-${color}-600 在源码里就是一个模板字符串节点，color 的值在构建阶段完全不可见，编译器提取不到 text-red-600 这样的完整组合，自然不生成对应 CSS 规则。
现象是：DOM 的 class 属性确实显示为 text-red-600，但浏览器开发者工具里查不到该类的样式声明——因为 CSS 文件里压根没这行规则。
- 开发服务器（
npm run dev）和生产构建（npm run build）全都会失效 -
content配置项无法补救：它只决定扫描哪些文件，不改变“只提取字面量”的行为 - Vue 的
:class="`bg-${theme}-100`、React 的className={`line-clamp-${lines}`}同样中招
常见错误现象与误判点
你以为是 class 顺序、!important 或 PurgeCSS 清除了类，其实都不是。真正的问题是：CSS 规则从未被生成。
- 浏览器控制台看到
text-red-600却没颜色 → 规则缺失，不是优先级问题 - 部分颜色（如
blue、green）能生效，rose、amber不生效 → 这些类根本没被扫描到，不是“支持不全” - 改了
tailwind.config.js但没重启 dev server → safelist 修改必须重启才生效（缓存不自动更新） - 小程序里
hover:bg-blue-500完全空白 → WXSS 语法非法，不是 Tailwind 没编译，是小程序解析器直接跳过
预定义完整类名是最稳的解法
把所有可能用到的组合提前写成字符串常量，让编译器静态可查。这是零配置、无运行时开销、类型安全的正解。
例如：
const themeClasses = {
primary: 'text-blue-600 bg-white p-3',
warning: 'text-amber-700 bg-amber-50 border border-amber-200',
danger: 'text-red-600 bg-red-50'
}
// 使用时
<div classname="{themeClasses[status]}"></div>
- ✅ TypeScript 可约束
status类型，IDE 能跳转提示 - ✅ 不依赖
safelist，也不膨胀 CSS 体积 - ❌ 如果混入自定义类（如
my-btn），需额外加到safelist，否则会被 PurgeCSS 清掉
什么时候必须用 safelist？
仅当动态值**无法穷举**且你坚持用 Tailwind 语法时才启用，比如用户输入 hex 颜色、API 返回任意 type 字符串、或需要 bg-[url()] 这类功能。
配置示例（tailwind.config.js）：
safelist: [
'bg-red-500',
'bg-blue-500',
{ pattern: /bg-\[#([0-9A-F]{6}|[0-9A-F]{3})\]/ },
{ pattern: /from-[a-z]+-500/ }
]
- ⚠️ 正则必须用
{ pattern: /.../ }对象形式，写成字符串无效 - ⚠️ 过度宽泛的正则（如
/bg-.*/）会引入大量无用 CSS - ⚠️ 小程序等特殊环境还需额外处理：装
weapp-tailwindcss插件、关preflight、content必须包含.wxml路径
最易被忽略的一点：动态类名失效从来不是“怎么让它动起来”的问题，而是“怎么让编译器看见它”的问题。别在运行时拼接上花时间调试，先确认那串类名是不是以完整字面量形式存在于你的源文件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
