动态类名在生产环境失效，因Tailwind JIT仅提取源码中完整字面量类名，不执行JS模板字符串；开发环境因缓存宽松“侥幸生效”，生产构建则严格按content扫描、safelist声明和静态提取裁剪CSS。
动态类名在生产环境失效，不是构建流程出错，而是 Tailwind 根本没生成对应 CSS 规则——text-${color}-600 这种写法在源码里只是模板字符串，JIT 编译器不执行 JS，自然不会提取 text-blue-600。
为什么开发环境看着正常，生产环境就没了？
开发服务器（npm run dev）常因未启用完整 Purge 或缓存宽松而“侥幸生效”，但生产构建（npm run build）严格按 content 扫描 + safelist 声明 + JIT 静态提取三重机制裁剪 CSS。只要类名没以完整字面量形式出现在扫描路径内，就会被彻底剔除。
- DOM 中
class属性显示bg-rose-400≠ 样式存在；用浏览器开发者工具搜索最终 CSS 文件（如dist/assets/index.*.css），确认该类是否真实存在 - Vue 的
:class="`bg-${theme}-100`"、React 的className={`from-${type}-500`}、甚至小程序class="{{'text-red-500'}}"全部中招——运行时拼接 ≠ 构建时可见 - 即使
content写成["./src/**/*"]，也无法让编译器“猜”出变量值；它只匹配text-red-500这样的固定字符串
预定义完整类名是最稳的解法
把组合逻辑提前到数据层，让每个分支返回的都是静态、可扫描的完整类名字符串。这绕开了所有 JIT 限制，也利于 TypeScript 类型约束和 IDE 跳转。
- ✅ 正确示例：
const theme = { primary: 'text-blue-600 bg-white', secondary: 'text-gray-700 bg-gray-100' }; - ✅ 使用方式：
className={theme.primary}—— 字符串完整、无插值、零配置 - ⚠️ 注意：若混入自定义类（如
my-btn），需单独加进safelist，否则会被 PurgeCSS 清掉 - 性能优势：不增加 CSS 体积，无运行时开销，类型安全度高
safelist 是唯一合规的兜底入口
当值不可穷举（如用户输入的 HEX、API 返回的任意 type）、或必须用 bg-[#xxx] / line-clamp-${n} 等语法时，safelist 是 Tailwind 官方认可的唯一入口。
立即学习“前端免费学习笔记（深入）”；
- 配置位置：
tailwind.config.js的safelist数组 - 写字符串：
'bg-red-500'—— 适合高频固定值 - 写正则：
{ pattern: /text-(red|blue|green)-\d{3}/ }—— 注意必须匹配完整类名，且响应式前缀要显式包含，如/^(md|lg):text-red-500$/ - ⚠️ 风险：正则太宽会膨胀 CSS；太窄会漏匹配；改完必须重启开发服务器，缓存不自动更新
别用内联 style 对抗 Tailwind 的设计边界
当动态值完全失控（如实时计算的 opacity、渐变 stop 位置、url() 路径），硬套 bg-[${url}] 不仅无效，还会污染维护性。此时直接用原生 style 更清晰可靠。
- ✅ 推荐：
style={{ opacity: alpha, backgroundImage: `url(${src})` }} - ❌ 拒绝：
className={`bg-[${src}] opacity-[${alpha * 100}]`}—— JIT 不识别，safelist 难覆盖，还容易 XSS - 关键判断点：如果这个值连你都无法在编译前枚举出所有可能取值，就别走 Tailwind 类名路径
最易被忽略的是：safelist 正则必须匹配“完整类名”，/bg-/ 会误匹配 background 这类原生属性；而 content 路径漏掉一个 .tsx 或 .wxml，整片组件的类名就归零——这些都不是代码逻辑问题，是构建配置的硬边界。
