tailwind v3 jit 编译器仅扫描源码中写死的完整类名字符串，无法识别模板语法如text-${color}-600，导致对应css未生成；应预定义完整类名或正确配置safelist正则。
因为 Tailwind v3 的 JIT 编译器不执行 JavaScript，只扫描源码中写死的、完整连续的字符串字面量——text-${color}-600 在构建时只是个模板语法结构，color 的值不可见，编译器提取不到 text-red-600 这样的完整类名，自然不生成对应 CSS 规则。
为什么 DOM 里有 class 却没样式
现象是开发者工具里能看到 class="text-blue-600"，但文字就是不蓝。这不是优先级或 !important 能解决的——那个类名压根没进最终 CSS 文件。你可以直接打开 dist/*.css 搜索 text-blue-600，如果不存在，就确认是 JIT 扫描失效，不是浏览器渲染问题。
预定义完整类名字符串是最稳解法
把组合逻辑提前到数据层，让每个变量值本身就是可被静态扫描到的完整类名字符串：
const statusClasses = { success: 'text-green-600 bg-green-50', error: 'text-red-600 bg-red-50' }- 使用时直接
className={statusClasses[status]}，不拼接、不插值 - ✅ TypeScript 可约束
status类型，IDE 可跳转，零运行时开销 - ❌ 如果混入自定义类（如
my-btn），需额外加到safelist，否则会被 PurgeCSS 清掉
safelist 配置必须写对才生效
只有当动态值无法穷举（比如用户输入的 HEX 颜色、API 返回的任意字符串）时，才该用 safelist。但写错就等于白配：
- 正则必须用对象形式：
{ pattern: /bg-[#([0-9A-F]{6}|[0-9A-F]{3})]/ }，写成字符串'/bg-\[#.+/]'完全无效 - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，漏掉^或$可能误匹配md:text-red-500-text - 改完
safelist必须重启开发服务器，缓存不会自动更新 -
content配置再全也救不了动态拼接——它只决定“扫哪些文件”，不改变“怎么扫”
真正容易被忽略的是：Tailwind 不是运行时库，它在构建阶段就完成了所有 CSS 生成；你写的任何 JS 表达式，它都看不到结果，只看到源码里的字面量。所以别试图让它“理解”变量，而是把变量变成它能“看见”的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
