Tailwind JIT不识别动态拼接class名是因为其依赖静态分析，仅扫描源码中字面量类名；动态生成的类需通过safelist白名单预声明，支持字符串或正则匹配，并须重启开发服务器验证生效。
为什么Tailwind JIT不识别动态拼接的class名
Tailwind的JIT引擎默认只扫描源码中**字面量出现的类名**，比如 class="text-red-500"。一旦你用字符串拼接、变量插值或模板语法生成类名（如 class="${prefix}-red-500" 或 :class="`bg-${color}-500`"），JIT在构建时根本看不到完整类名，直接跳过——最终CSS里压根没定义它，页面就“失色”了。
这不是bug，是设计使然：JIT靠静态分析提速，没法运行时穷举所有可能的字符串组合。
用safelist提前声明动态类名模式
safelist 是Tailwind配置里专为这类场景设的白名单机制，告诉JIT：“哪怕没在源码里明写，这些类也得生成CSS”。关键在于写法要匹配实际运行时生成的类名，否则照样漏。
- 匹配单个固定类：直接写字符串，如
'bg-blue-600' - 匹配带通配符的类：用正则，注意必须是完整类名匹配，例如
/^bg-(red|blue|green)-\d+$/能覆盖bg-red-500、bg-green-900，但不能写成/bg-.*/（太宽泛，会拖慢构建且可能引入无用类） - 匹配属性选择器类（如
group-hover:scale-110）：正则需包含冒号，如/^group-hover:scale-\d+$/ - Vue/React中常见拼接场景：如果变量
color可能是'red'、'indigo'，而你拼出text-${color}-600，那就该加/^text-(red|indigo|emerald|violet)-600$/
safelist写在哪？怎么验证生效
必须写在 tailwind.config.js 的顶层 safelist 数组里，不是 content 也不是 theme 下：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
safelist: [
'bg-red-500',
/^text-(sm|md|lg)-\d+$/,
/^hover:bg-(primary|secondary)-\d+$/,
],
content: [...],
}
改完配置后，务必重启开发服务器（npm run dev 或 pnpm dev），因为JIT缓存不会自动清掉旧的safelist。验证是否生效最直接的办法：打开浏览器开发者工具，搜索生成的类名（如 bg-red-500），看对应CSS规则是否存在；或者检查构建后的CSS文件里有没有该类的声明。
比safelist更轻量的替代方案：@layer utilities + @apply
如果你只是少量、确定的动态组合（比如几个按钮变体），与其维护一长串正则，不如用CSS自定义工具类：
@layer utilities {
.btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700; }
.btn-secondary { @apply bg-gray-200 text-gray-800 hover:bg-gray-300; }
}
然后在HTML里写 class="btn-{{ type }}" —— 这种写法完全绕开JIT扫描问题，因为 btn-primary 是字面量，会被正常收录。缺点是失去Tailwind原子类的灵活性，适合稳定、复用率高的组件变体。
真正难处理的是颜色/尺寸这类高频可变维度，safelist仍是目前最可控的解法；但正则别贪多，每条都要对应真实业务值域，否则打包体积和构建时间都会悄悄上涨。
