Tailwind CSS 动态拼接类名（如 text-${color}-600）在构建后无样式，因 JIT 编译器仅静态扫描字面量类名，不执行 JS 插值；需用 safelist 显式声明或预定义完整类名字符串。
Tailwind CSS 动态拼接的类名（如 text-${color}-600）在构建后没样式，不是你写错了，而是它压根没生成对应 CSS 规则——JIT 编译器根本“看不见”这个类名。
Tailwind 的 JIT 编译器不执行 JavaScript
它只做静态文本扫描：遍历你的源码文件，用正则匹配形如 text-red-600、bg-[#3b82f6] 这样的完整字符串字面量。遇到 text-${color}-600，扫描器看到的就是这整个未展开的模板字符串，不会运行 JS、不会代入 color = 'red'、也不会做插值还原。
结果就是：DOM 里 class="text-red-600" 显示正常，但浏览器查不到该规则——因为最终 CSS 文件里真没有这一行。
- 开发服务器（
npm run dev）和生产构建（npm run build）全都会失效 - 哪怕
color是 const 常量，只要没直接写出完整类名，就不会被提取 -
content配置再宽泛（如["./src/**/*"]）也救不了，它只决定扫哪些文件，不改变“怎么扫”
safelist 不是兜底开关，而是精准声明入口
当动态值范围有限（比如 line-clamp-1 到 line-clamp-6）、或颜色可枚举（red/blue/green），safelist 是唯一合规解法，但它必须写对模式：
立即学习“前端免费学习笔记（深入）”；
- 写死单个类：
'bg-red-500'、'hover:bg-blue-600' - 用正则匹配完整类名：
{ pattern: /^line-clamp-[1-6]$/ }（注意不能写/line-clamp-/，太宽泛） - 响应式前缀要显式包含：
{ pattern: /^(md|lg):text-red-500$/ }，否则md:text-red-500被忽略 - 改完
tailwind.config.js必须重启开发服务器，缓存不会自动更新
预定义完整类名是最稳、零配置的解法
把组合逻辑提到数据层，让每个变量值本身就是静态、完整、可被扫描到的类名字符串：
const theme = {
primary: 'text-blue-600 bg-white',
secondary: 'text-gray-700 bg-gray-100',
error: 'text-red-600 border-red-300'
};
然后直接使用：className={theme[status]}。这种方式：
- 无需修改
tailwind.config.js - 天然兼容 TypeScript 类型约束（可定义
type ThemeKey = 'primary' | 'secondary' | 'error'） - 不增加构建体积，无运行时开销
- 避免混入非 Tailwind 类（如
my-custom-class）导致漏样式
真正容易被忽略的是：哪怕你确认 DOM 中 class 属性已渲染为 text-red-600，也要打开生成的 dist/*.css 文件手动搜索验证——如果搜不到，问题一定出在构建阶段，和浏览器或框架无关。
