tailwind jit不识别动态拼接类名，因其仅静态扫描源码中写死的完整字符串字面量，不执行js插值、不推测变量值，故text-${color}-600等模板字符串在构建时无法被解析为实际类名，导致对应css规则未生成。
因为 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 文件里。
- 用文本编辑器搜索生成的
dist/*.css文件，确认text-blue-600是否真实存在 - 如果不存在，说明 JIT 没扫描到，和浏览器渲染无关
- 开发服务器和生产构建都会失效，不是环境差异问题
safelist 不是兜底开关，而是精准声明
当值不可穷举（如用户输入的 HEX、API 返回的任意字符串）或必须用自定义语法（如 line-clamp-${n}），safelist 是唯一合规入口，但它需要你明确告诉 Tailwind：“这些模式我确定会用到”。
- 写字符串：
'bg-blue-600'—— 适合高频固定值 - 写正则：
{ pattern: /^line-clamp-\d+$/ }—— 注意必须匹配完整类名，不能写/line-clamp-/ - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，否则md:text-red-500会被忽略 - 改完
safelist必须重启开发服务器，缓存不自动更新
真正容易被忽略的是：safelist 的正则必须用斜杠包裹，写成 '/from-[a-z]+-500/' 会被当普通字符串处理，完全无效；而 content 配置再全也救不了动态拼接——它只决定“扫哪些文件”，不改变“怎么扫”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
