tailwind在生产环境不生成特定类名，是因为jit编译器仅扫描源码中写死的完整字符串字面量，无法识别bg-[${color}]或text-${size}-600等动态拼接形式，导致对应css规则未生成。
Tailwind 在生产环境不生成特定类名，基本就是 JIT 编译器压根没“看见”那个类——它只认源码里写死的完整字符串，bg-[${color}]、text-${size}-600 这类写法在构建时根本不存在，自然不会进 CSS。
动态类名是否被 JIT 扫描到，取决于它在源码中是不是完整字面量
Tailwind 的类名提取发生在构建时，不是运行时。它用正则扫文件内容，只匹配像 text-blue-600、bg-[#3b82f6] 这样已存在的、不间断的字符串。任何带 JS 插值的表达式，比如 className={`from-${type}-500`}，源码里实际是 from-${type}-500 这个模板字符串，JIT 不会执行、不推测、不拼接。
- 现象：DOM 中
class属性显示正确（如from-blue-500），但无样式 - 本质：该类名从未出现在最终 CSS 文件里，浏览器查不到规则
- 影响：开发服务器和生产构建全都会失效，不是环境差异问题
- 验证方式：临时注释掉
content字段跑一次build，如果样式全回来了，就确认是 JIT 扫描漏了
检查 content 配置是否覆盖所有含 className 的文件类型
即使你写了动态逻辑，只要类名以完整字符串形式显式出现在某个可扫描文件里，JIT 就能提取。但前提是 content 数组真能读到那个文件。
- 常见漏配：
["./src/**/*.{js,ts}"]会漏掉所有.tsx和.jsx文件 - Vue/Svelte/MDX 项目必须显式加上
.vue、.svelte、.mdx等后缀 - 静态 HTML 模板（如
public/index.html）也要列进content，否则里面写的class="mt-4"也会被 PurgeCSS 删掉 - 使用
import.meta.glob或require.context动态导入的模块，其路径不会被 glob 自动捕获，得单独加进content
safelist 不是万能补丁，它只对“已知模式”有效
safelist 是唯一能让 JIT 生成未在源码中显式出现的类的方式，但它不是兜底开关，而是精准声明。
- 字符串字面量（如
'bg-red-500'）适合高频固定类，改完需重启 dev server - 正则必须用
/^text-(red|blue)-(500|600)$/这种 RegExp 字面量，不能写字符串"^text-..." - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，只写text-red-500会漏掉md:text-red-500 - 避免
.*结尾：/text-.*/可能误匹配text-clip这类原生 CSS 属性 - 用户输入的 HEX 值、API 返回的任意字符串，不适合塞进
safelist，体积不可控且易漏
真正不可穷举的动态值，应该交给 style 属性
当值来自用户输入、实时计算、或第三方 API，且无法提前枚举（比如 line-clamp-${api.lines}、bg-[${userColor}]），硬套 Tailwind 类名只会让构建变脆弱、CSS 体积失控。
- 直接用
style={{ backgroundColor: userColor }}或style={{ WebkitLineClamp: api.lines }} - 渐变 stop 位置、opacity 动画帧、url() 路径这些原生 CSS 支持但 Tailwind 不覆盖的场景，
style更直接 - 不需要额外配置、不依赖 JIT 扫描、不引入 PurgeCSS 风险
- 注意：别混用，比如一边写
text-blue-600一边又写style={{ color: 'red' }}，容易覆盖冲突
最常被忽略的一点：PurgeCSS 匹配的是源码字符串，不是 DOM 渲染结果。你在浏览器里看到 class="from-blue-500"，不代表 Tailwind 认识它——它只相信自己在构建时从文件里读到的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
