tailwind css 不支持动态拼接类名，因其 jit 编译器仅扫描源码中已写死的完整字符串字面量，不执行 js 或推测变量值；动态生成的类名未被提取进 css 文件，故无样式生效。
Tailwind CSS 不支持 bg-[${color}] 或 text-${type}-600 这类动态拼接类名，不是它“不支持”，而是它的 JIT 编译器压根不会执行 JavaScript——它只在构建时扫描源码中**已写死的、完整的字符串字面量**。你写的 className={`text-${color}-600`}，编译器看到的是 text-${color}-600 这个未展开的模板字符串，而不是 text-blue-600；它不会推测变量值，也不会做运行时插值。
为什么 DOM 里 class 属性看着正常，但没样式？
现象是：浏览器开发者工具里 class 属性确实显示为 text-blue-600，但文字没变蓝。本质原因是：这个类名根本没被写入最终生成的 CSS 文件里。Tailwind 的构建流程不包含 JS 执行环节，所以它提取不到任何动态拼接出的完整类名。CSS 规则不存在，!important 和 class 顺序调整都无效。
- 开发服务器（
npm run dev）和生产构建（npm run build）全都会失效 -
content配置项无法补救——它只扫描字面量，不解析表达式 - Vue 的
:class="`bg-${theme}-100`"、React 的className={`line-clamp-${lines}`}同样中招
预定义完整类名字符串是最稳的解法
把组合逻辑提前到数据层，让每个变量值本身就是可被扫描到的完整类名字符串。这样既符合 Tailwind 的静态分析约束，也利于 TypeScript 类型校验和 IDE 跳转提示。
- ✅ 正确写法：
const theme = { primary: 'text-blue-600 bg-white', secondary: 'text-gray-700 bg-gray-100' }; - ✅ 使用方式：
className={theme.primary}—— 字符串静态、完整、无插值 - ⚠️ 注意：如果混入自定义类（如
my-custom-class），需额外加到safelist，否则会被 PurgeCSS 清掉 - 优势：无运行时开销、不膨胀 CSS 体积、类型安全、IDE 可跳转
必须用 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；太窄会漏匹配；修改后必须重启开发服务器才生效（缓存不自动更新）
- 例如
line-clamp场景：{ pattern: /^line-clamp-[1-6]$/ }比/^line-clamp-\d+$/更安全
真正容易被忽略的是：safelist 的正则必须匹配**最终运行时生成的完整类名字符串**，而不是你代码里写的模板片段；而且它只对 JIT 模式下的构建过程起作用——哪怕你写了 { pattern: /text-.*/ }，Tailwind 也不会因此生成所有可能的文本颜色，它只是按规则“放行”那些能被该正则匹配上的类名。别指望它兜底，得自己控制精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
