Tailwind JIT 编译器不解析动态字符串，仅扫描静态字面量类名；模板字符串、变量插值、拼接等写法导致对应 CSS 规则未生成，即使 DOM 中 class 存在也无样式。
因为 Tailwind 的 JIT 编译器不执行 JavaScript，只在构建时扫描源码中已写死的完整字符串字面量——text-${color}-600 这种模板字符串，编译器看到的是带 ${} 的原始文本，不是 text-blue-600，对应 CSS 规则压根不会生成。
为什么 DOM 里 class 属性看着正常，但没样式？
现象是：开发者工具里 class="text-blue-600" 清晰可见，文字却没变蓝。本质是这个类名根本不在最终生成的 dist/assets/index.css 文件里。你用文本编辑器搜索 text-blue-600，搜不到就确认是扫描失败。
这不是优先级问题，也不是加 !important 能解决的——规则不存在，覆盖无从谈起。开发服务器（npm run dev）和生产构建（npm run build）全都会失效，不是环境差异。
-
className={`bg-[${hex}]`}：JIT 不解析表达式，hex是变量，直接忽略 -
className={`text-${size}-font-bold`}：中间插值破坏了完整字面量形式 -
:class="`p-${padding}`"（Vue）或className={cls + ' w-4'}：字符串拼接导致拆分，扫描器只认连续字符串 -
class="md:text-${size}"：响应式前缀 + 插值，双重失效
预定义完整类名是最稳的解法
把组合逻辑提到数据层，让每个变量值本身就是可被扫描到的完整类名字符串。这样既符合 JIT 约束，也利于类型校验和 IDE 跳转。
- ✅ 正确写法：
const theme = { primary: 'text-blue-600 bg-white', secondary: 'text-gray-700 bg-gray-100' }; - ✅ 使用方式：
className={theme.primary}——字符串静态、完整、无插值 - ⚠️ 注意：如果混入自定义类（如
my-custom-class），需额外加到safelist，否则会被 PurgeCSS 清掉
必须用 safelist 的场景：值不可穷举且必须走 Tailwind 语法
当 color 是用户输入的 hex 值（如 #3b82f6）、API 返回的任意 type 字符串、或需要 bg-[url()] 这类语法时，safelist 是唯一合规入口。
- 配置位置：
tailwind.config.js的safelist数组 - 匹配单个类：
'bg-blue-600' - 匹配正则：
{ pattern: /bg-\[#([0-9A-F]{6}|[0-9A-F]{3})\]/ }，覆盖常见 hex 背景色 - ⚠️ 风险：正则太宽会引入大量无用 CSS；太窄会漏匹配；修改后必须重启开发服务器才生效（缓存不自动更新）
真正容易被忽略的是：safelist 不是“兜底开关”，而是你对编译器的明确承诺——它要求你清楚知道哪些动态模式一定会出现，并主动告诉编译器“请生成这些”。一旦漏掉 hover:、md:、dark: 等变体前缀，那一类就还是白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
