Tailwind CSS无法识别动态拼接类名，因其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 -
:class="`text-${type}-500`"（Vue）同理，编译器看到的是未展开的模板字面量 - 哪怕
theme = 'blue'是常量，只要没直接写出bg-blue-100，就不会进 CSS
DOM 里 class 属性显示正常，但没样式
这是最典型的误判信号：浏览器开发者工具能看到 class="text-blue-600"，但文字就是不蓝。这不是优先级或 !important 能解决的——那个类名压根不在最终 CSS 文件里。
- 用文本编辑器搜索生成的
dist/*.css文件，确认text-blue-600是否真实存在 - 如果不存在，说明 JIT 没扫描到，和浏览器渲染无关
- 开发服务器和生产构建都会失效，不是环境差异问题
content 配置再全也救不了动态拼接
content 字段只决定“扫哪些文件”，不改变“怎么扫”。它只会提取文件中已存在的完整类名字符串，比如 text-red-500 或 bg-[#3b82f6]，但不会对 text-${color}-500 做任何插值还原。
- 漏配
.tsx或.jsx后缀会导致整个组件树的类名丢失，但这和动态拼接是两回事 - 即使
content写成["./src/**/*"]，也无法让 JIT 执行 JS 表达式 - 验证方式：临时注释掉
content，跑一次build；如果样式全回来了，说明是路径漏配；如果依然失效，就是动态拼接问题
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必须重启开发服务器，缓存不自动更新
真正难处理的不是 text-red-600 这类可枚举的组合，而是那些运行时才能确定、且无法提前列全的值——比如第三方 API 返回的 type 字符串、用户实时输入的颜色字段。这时候别硬塞进 safelist，该用 style 就用 style，Tailwind 的边界就在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
