Tailwind JIT 编译器不执行 JS，仅静态扫描源码中完整字面量类名，故 text-${color}-600 等动态拼接写法不会生成对应 CSS 规则，导致 DOM 中 class 存在但样式失效。
动态渲染的 Tailwind 类名不生效，不是 JS 写错了，也不是浏览器兼容问题，而是 JIT 编译器压根没生成对应 CSS 规则——text-${color}-600 这种写法在构建时只被当作文本字符串扫描，不会拆解变量、也不会执行插值，最终 text-red-600 根本不在输出的 CSS 文件里。
为什么 className={`bg-${color}-500`} 在 React/Vue 里无效
Tailwind 的 JIT 编译器只提取源码中**完整、静态、未被运行时逻辑干扰的字符串字面量**。它不执行 JavaScript，也不推测变量值。所以：
-
bg-blue-500出现在 JSX 模板里 → 被扫描 → CSS 规则生成 -
`bg-${color}-500`是模板字符串 → 编译器只看到bg-${和}-500两段 → 无完整类名 → 不生成规则 - 即使
color = 'red'，控制台打印出bg-red-500，这个字符串也从未以字面量形式存在于源码中
典型现象：DOM 中 class="bg-red-500" 明明存在，但 Styles 面板里查不到该规则；用文本编辑器打开 dist/assets/index.css 搜索 bg-red-500，结果为空。
Vue 的 :class="`p-${size}`" 和 React 的 className={cls + ' w-4'} 同样失效
所有破坏“完整字面量连续性”的写法都会被跳过，包括：
-
:class="`p-${size}`"（Vue 模板字符串插值） -
className={cls + ' w-4'}（字符串拼接，cls可能是变量） -
className={`md:text-${size}`}（响应式前缀 + 插值，双重失效） -
className={`bg-[${hex}]`}（任意括号内插值，JIT 不解析表达式）
注意：size 或 hex 是运行时变量，编译器无法在构建阶段穷举其所有可能值，因此不会为任何组合生成 CSS。
预定义完整类名比 safelist 更可靠
最推荐的做法是把组合逻辑提前到数据层，让每个可选值本身就是静态字符串：
const theme = {
small: 'p-2 text-sm',
medium: 'p-4 text-base',
large: 'p-6 text-lg'
};
// ✅ className={theme[size]} —— 字符串完整、可扫描、可类型约束
相比 safelist 配置，这种方式没有副作用：
- 不膨胀 CSS 体积（
safelist会强制生成所有匹配类，哪怕实际没用到） - 无需维护正则（比如
/bg-[a-z]+-500/容易漏掉bg-rose-500或误匹配bg-foo-500） - TypeScript 下可精确约束
size类型，避免运行时传入非法值 - IDE 支持跳转和自动补全
只有当值完全不可控（如用户输入的 hex 颜色、API 返回的任意字符串）时，才考虑 safelist 或退回到 style 属性。
动态添加 DOM 元素时 class 字符串必须用空格分隔
另一个常被忽略的底层问题：手动设置 element.className 时，多个类名之间**必须用空格连接**，不能用连字符或其它符号：
- ❌
element.className = 'w-auto-md:w-[82%]-mx-10';→ 浏览器当作一个叫w-auto-md:w-[82%]-mx-10的类 - ✅
element.className = 'w-auto md:w-[82%] mx-10';→ 浏览器识别为三个独立类
这个错误和 JIT 扫描无关，但它会让“明明写了类却没样式”的问题更难定位——尤其当混用自定义类（如 container-addTask）时，很容易误以为是 Tailwind 问题，其实是 HTML class 语法错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
