Tailwind v3 JIT编译器仅扫描源码中完整、连续的字面量类名，不解析JS模板字符串；text-${color}-600在构建时无法展开为text-red-600等具体类，故CSS规则未生成，导致DOM有class但无样式。
为什么 className={`text-${color}-600`} 生成了 class 但没样式
因为 Tailwind v3 的 JIT 编译器只扫描源码中**完整、连续、未被 JS 拆分的字面量类名**。像 text-${color}-600 这种模板字符串，在构建时只是个语法结构，color 的值根本不可见，编译器提取不到 text-red-600 这样的完整串，自然不生成对应 CSS 规则——DOM 里看着有 class，浏览器查无此样式。
预定义完整类名数组是最稳的解法
把所有可能用到的组合提前写死为字符串，让编译器能静态看到它们：
const themeClasses = {
primary: 'text-blue-600 bg-white p-3',
warning: 'text-amber-700 bg-amber-50 border border-amber-200',
danger: 'text-red-600 bg-red-50'
}
// 使用时直接取值
<div className={themeClasses[status]} />
- ✅ 不依赖
safelist，零配置，类型安全（TypeScript 可约束 key） - ✅ 构建体积不膨胀，无运行时开销
- ❌ 别混入自定义类（如
my-btn），否则需额外加safelist
必须用 safelist 的场景和写法
当动态值无法穷举（比如用户输入 hex 颜色、API 返回的 type 字符串），且你坚持用 bg-[#xxx] 或 from-${type} 语法时，才启用 safelist：
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,vue}'],
safelist: [
'bg-red-500',
'bg-blue-500',
{ pattern: /bg-\[#([0-9A-F]{6}|[0-9A-F]{3})\]/ },
{ pattern: /from-[a-z]+-500/ }
]
}
- ⚠️ 正则必须用
{ pattern: /.../ }对象形式，写成字符串'/from-[a-z]+-500/'无效 - ⚠️ 过度匹配会增大 CSS 体积；正则漏写
^或$可能误命中（如from-blue-500-text） - ✅ 适合兜底不可控输入，但别用它替代业务逻辑层的类名收敛
小程序或特殊环境要额外处理字符兼容性
微信小程序 WXSS 不支持 :、/、[、] 等字符，hover:bg-blue-500 或 w-1/2 会被直接忽略——不是失效，是语法非法。
立即学习“前端免费学习笔记（深入）”；
- 必须装
weapp-tailwindcss插件做类名转换（如hover:bg-blue-500→hover-bg-blue-500） -
content必须包含.wxml路径：'./src/**/*.wxml'，否则转换后的类压根不会进 CSS - 记得关掉
preflight，小程序不支持 CSS Reset 中的部分规则
