Tailwind JIT 编译器仅静态扫描源码中的字符串字面量，无法识别模板字符串（如text-${color}-600）生成对应CSS规则；动态拼接类名必须通过safelist显式声明正则模式（如/^text-[a-z]+-500$/），且需重启开发服务器生效。
因为 Tailwind 的 JIT 编译器不执行 JavaScript，只扫描源码中写死的完整字符串字面量——text-${color}-600 这种模板字符串在构建时根本不会被识别为有效类名，自然不会生成对应 CSS 规则。
Tailwind 构建阶段根本不“看懂”JS 表达式
Tailwind 不是运行时库，它在 npm run build 或 npm run dev 阶段就完成了所有 CSS 生成。这个过程靠静态文本扫描（正则匹配），不解析、不执行、不推测任何 JS 逻辑。
-
className={`bg-${theme}-100`}在源码里只是字符串bg-${theme}-100，不是bg-blue-100 - 哪怕
theme = 'blue'是常量，只要没直接写出bg-blue-100，就不会进最终 CSS 文件 -
:class="`text-${type}-500`"（Vue）同理，编译器看到的是未展开的模板字面量
DOM 显示 class 正常，但样式就是不生效
这是最典型的误判信号：浏览器开发者工具能看到 class="text-blue-600"，但文字就是不蓝。这不是优先级或 !important 能解决的——那个类名压根不在最终 CSS 文件里。
- 检查生成的
tailwind.css文件里是否存在该类名，不存在 = JIT 没扫描到 - 开发服务器和生产构建都会失效，不是环境差异问题
- 不要试图用 CSS 顺序、权重或调试工具覆盖来“修复”，规则本身不存在
safelist 不是兜底开关，而是精准声明
当值不可穷举（如用户输入的 HEX、API 返回的任意字符串）或必须用自定义语法（如 line-clamp-${n}），safelist 是唯一合规入口，但它需要你明确告诉 Tailwind：“这些模式我确定会用到”。
立即学习“前端免费学习笔记（深入）”；
- 写字符串：
'bg-blue-600'—— 适合高频固定值 - 写正则：
{ pattern: /^line-clamp-\d+$/ }—— 注意必须匹配完整类名，不能写/line-clamp-/ - 响应式前缀要显式包含，否则会被忽略（例如
/^md:text-[a-z]+-500$/） - 改完必须重启开发服务器，缓存不自动更新
真正容易被忽略的是：safelist 的正则必须用斜杠包裹，写成 '/from-[a-z]+-500/' 会被当普通字符串处理，完全无效；而 content 配置再全也救不了动态拼接——它只决定“扫哪些文件”，不改变“怎么扫”。
