tailwind jit 编译器不执行 javascript，仅扫描源码中写死的完整字符串字面量，因此动态拼接的类名（如 text-${color}-600）不会被识别和生成对应 css 规则，必须通过 safelist 预定义或使用静态完整类名。
因为 Tailwind 的 JIT 编译器不执行 JavaScript，只扫描源码中写死的完整字符串字面量——text-${color}-600 这种模板字符串在构建时根本不会被识别为有效类名，自然不会生成对应 CSS 规则。
Tailwind 构建阶段根本不“看懂”JS 表达式
Tailwind 的类名提取发生在 build time，不是 runtime。你写的 className={`text-${color}-600`} 在源码里就是一段未展开的模板字符串，编译器看到的是 text-${color}-600，而不是 text-blue-600。它不会运行 JS、不会推测变量值、也不会做字符串插值。
- 现象：DOM 中
class属性显示正常（如text-red-600），但无样式生效 - 本质：该类名从未被写入最终 CSS 文件，浏览器查无此规则
- 影响范围：开发服务器（
npm run dev）和生产构建（npm run build）全都会失效
content 配置救不了动态拼接类名
content 配置负责扫描哪些文件里用了哪些类，但它只匹配字面量字符串，不执行 JS 表达式。哪怕你把 content 写得再全，也扫不到运行时才拼出来的类名。
-
text-${error ? 'red' : 'green'}-600→ 扫描器看到的是整个模板字符串，不是text-red-600或text-green-600 -
class={`line-clamp-${lines}`}→ 源码里没有line-clamp-1、line-clamp-2等完整字符串 -
bg-[${theme.primary}]→ JIT 不解析变量值，只当它是普通字符串
safelist 是唯一合规入口，但必须写对模式
当 color 是用户输入的 hex 值（如 #3b82f6）、API 返回的任意 type 字符串、或需要 bg-[url()] 这类语法时，safelist 是唯一合规入口。
- 匹配单个固定类：直接写字符串，如
'bg-red-500' - 匹配批量类：用正则，注意必须是完整类名匹配，例如
/^bg-(red|blue|green)-\d+$/能覆盖bg-red-500、bg-green-900 - 不能写成
/bg-.*/（太宽泛，会拖慢构建且可能引入无用类） - 改完必须重启开发服务器（
npm run dev），JIT 缓存不会自动更新
预定义完整类名是最可靠、零配置的解法
把组合逻辑提前到数据层，让每个变量值本身就是可被扫描到的完整类名字符串。这样既符合 Tailwind 的设计约束，也利于 TypeScript 类型校验。
- ✅ 正确写法：
const theme = { primary: 'text-blue-600 bg-white', secondary: 'text-gray-700 bg-gray-100' }; - ✅ 使用方式：
className={theme.primary}—— 字符串静态、完整、无插值 - ⚠️ 注意：如果混入自定义类（如
my-custom-class），需额外加到safelist，否则会被 PurgeCSS 清掉
真正容易被忽略的是：哪怕你确认变量值正确、DOM class 属性渲染无误，只要这个完整类名没在源码中以字面量形式出现过，它就永远不会出现在最终 CSS 里——这不是缓存问题，也不是环境差异，是 JIT 的根本工作方式决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
