Tailwind v3 的 JIT 编译器不支持动态类名如 text-${color}-500，因其仅静态扫描源码中写死的完整字符串，不执行 JS；任意值语法 bg-[#xxx] 仅接受字面量，动态值须通过 safelist 显式声明。
不能直接动态生成未知类名的 CSS —— Tailwind v3 的 JIT 编译器不执行 JS，只扫描源码中写死的完整字符串。所谓“未知类名”，比如 text-${color}-500 或 bg-[${hex}]，在构建时根本不会被识别，最终 CSS 文件里压根没有对应规则。
为什么 text-${color}-500 永远不会生效
Tailwind 不是运行时样式库，它在 npm run build 阶段就完成了所有 CSS 输出。这个过程靠静态文本匹配，不解析、不运行任何 JS 表达式。
-
text-${color}-500在源码里只是模板字面量，不是text-red-500；编译器看到的是未展开的${}占位符 - 即使
color = 'red'是常量，只要没直接写出text-red-500，就不会进最终 CSS - 浏览器开发者工具里能看到
class="text-red-500"，但文字不红 —— 因为那个类名不在dist/*.css里
必须用 safelist 显式声明动态模式
当类名确实无法穷举（如用户输入 HEX、API 返回任意 color name、line-clamp-${n}），safelist 是唯一合规出口。它不是“兜底开关”，而是你对编译器的明确承诺：“这些我确定会用到”。
- 写字符串：
'text-red-500'→ 适合高频固定值 - 写正则：
{ pattern: /^line-clamp-\d+$/ }→ 注意必须匹配完整类名，不能只写/line-clamp-/ - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，否则md:text-red-500被忽略 - 改完
safelist必须重启开发服务器，缓存不自动更新
用 bg-[#xxx] 这类 arbitrary value 时的陷阱
任意值语法（arbitrary value）如 bg-[#3b82f6] 或 text-[2rem] 是 JIT 原生支持的，但仍有硬性限制：
- 必须是完整、合法的 CSS 值：比如
bg-[rgb(59,130,246)]可以，bg-[invalid]不会生成 - 不能嵌套 JS 变量：
bg-[${hex}]无效，必须写成bg-[#3b82f6]字面量才被扫描到 - HEX 值需带
#，且长度合法（#fff、#ffffff、#ffffffff都行；fff不行） - 如果值来自 props 或 API，只能走
safelist + 正则，例如{ pattern: /^bg-\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\]$/ }
最易被忽略的一点：safelist 的正则必须能 100% 匹配最终 class 字符串，包括所有变体前缀和中括号结构；少一个 ^ 或漏掉 hover:，那一类就还是白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
