Tailwind CSS无法识别动态拼接类名，因其JIT编译器仅静态扫描源码中写死的完整字符串字面量，不执行JS插值、不推测变量值，故text-${color}-600等模板字符串在构建时未被解析，对应CSS规则未生成。
Tailwind CSS 的动态类名（如 text-${color}-600 或 bg-[${hex}]）根本不会生成对应 CSS 规则，不是配置漏了、也不是环境问题，而是 JIT 编译器压根没“看见”它——它只认源码里写死的完整字符串，不执行 JS，不拼接，不推测。
为什么 className={`from-${type}-500`} 在 DOM 里显示正常却没样式
浏览器开发者工具看到 class="from-blue-500"，只是 JS 运行时拼出来的结果；Tailwind 构建阶段早在这之前就结束了。编译器扫描的是源码文本：from-${type}-500 这个模板字符串本身不是有效类名，正则匹配不到 from-blue-500，所以最终 CSS 文件里真没有这条规则。
- 验证方法：用文本编辑器搜索
dist/*.css，查不到from-blue-500就确认是这个问题 -
content配置再全也救不了——它只决定“扫哪些文件”，不改变“怎么扫” - 开发服务器和生产构建都会失效，不是热更新或缓存导致的假象
哪些写法会被 JIT 扫描到
只有出现在源码中、未被 JS 逻辑包裹的完整字符串字面量，才会被提取并生成 CSS：
- ✅
className="text-red-600 bg-blue-100"—— 直接写死，无变量 - ✅
className={theme.primary}，其中theme.primary = "text-red-600 bg-white"—— 变量值本身就是完整字符串 - ✅
className="md:text-lg dark:bg-gray-800"—— 响应式/状态前缀必须显式写出 - ❌
className={`text-${color}-600`}—— 模板字符串，JIT 不执行插值 - ❌
className={"text-" + color + "-600"}—— 字符串拼接，同样不可见
safelist 不是万能补丁，但它是唯一合规的兜底手段
当值不可穷举（比如用户输入的 HEX、API 返回的任意字符串），或必须用自定义语法（如 line-clamp-${n}），safelist 是唯一能让 JIT 主动生成规则的方式，但它要求你精准声明：
立即学习“前端免费学习笔记（深入）”；
- 字符串形式：
'bg-[#3b82f6]'或'text-red-500'—— 适合高频固定值 - 正则形式：
{ pattern: /^line-clamp-\d+$/ }—— 必须匹配完整类名，不能只写/line-clamp-/ - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，否则md:text-red-500会被忽略 - 改完
safelist必须重启开发服务器，缓存不会自动更新 - 避免用
.*结尾的模糊正则，可能误匹配原生 CSS 属性（如text-clip）
真正不可控的动态值，应该交给 style 属性
如果颜色来自用户输入、实时 API 响应，或需要计算出任意 hsl() 值，别硬塞进 safelist——体积爆炸、维护困难、还容易漏。这时候直接用 style 更合理：
- ✅
style={{ backgroundColor: userColor }} - ✅
style={{ backgroundImage: `linear-gradient(to bottom, ${start}, ${end})` }} - ⚠️ 注意：不要混用
style和className去控制同一属性（比如同时设backgroundColor和bg-red-500），后者会被前者覆盖
最常被忽略的一点：很多人以为“只要 DOM 里 class 属性对了，样式就该生效”，但 Tailwind 的类名生成发生在构建时，和运行时 DOM 完全解耦。一旦你写了插值，就等于主动放弃了 Tailwind 的静态保障机制——这不是 bug，是设计使然。
