Tailwind JIT 编译器不执行 JavaScript，仅静态扫描源码中已存在的完整类名字符串，动态拼接如 text-${color}-600 不会被识别，需显式写出或通过 safelist/预定义类名处理。
Tailwind 的 JIT 编译器根本不执行 JavaScript
它不是运行时库，而是在 npm run build 或 npm run dev 阶段就完成所有 CSS 生成。这个过程靠静态文本扫描（比如正则匹配），不解析 AST，不求值变量，也不展开模板字符串。
写 className={`text-${color}-600`}，源码里就只有 text-${color}-600 这个字符串——JIT 看到的是 JS 表达式，不是 text-blue-600 这样的完整字面量，自然跳过，CSS 文件里压根没这条规则。
- 哪怕
color = 'blue'是 const 常量，只要没直接写出text-blue-600，就不会进最终 CSS -
:class="`p-${padding}`"（Vue）、tw`text-${size}-sm`（如果用了 tagged template 但含插值）同样失效 - 开发者工具里能看到
class="text-blue-600"，但查不到对应 CSS 规则 → 这是典型信号
content 配置再全也救不了动态拼接
content 字段只决定“扫哪些文件”，不改变“怎么扫”。它提取的是文件中**已存在的完整类名字符串**，比如 bg-red-500 或 md:text-lg，但不会对 bg-${color}-500 做任何还原或猜测。
- 错误认知：“我把
content写成["./src/**/*"]就能覆盖所有动态情况” → 实际上它连.tsx后缀都不匹配，更别说插值 - 正确写法必须显式带扩展名：
["./src/**/*.{js,jsx,ts,tsx}"] - 漏配扩展名（如没加
.mdx或.astro）会导致整类文件的类名丢失，但这和动态拼接是两回事
safelist 不是万能兜底，而是精准声明
当值可穷举（如固定几种主题色）或模式可控（如 line-clamp-1 到 line-clamp-6），safelist 是唯一合规入口。但它要求你明确告诉 Tailwind：“这些我确定会用到”，而不是让它猜。
- 写字符串：
'from-blue-500'、'to-emerald-800' - 写正则：必须匹配完整类名，
{ pattern: /^from-(blue|red|green)-\d+$/ }✅，/from-.*/❌（太宽泛，CSS 体积爆炸） - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，否则md:text-red-500被忽略 - 改完
safelist必须重启开发服务器——缓存不自动更新
预定义完整类名比 safelist 更稳
把组合逻辑提到数据层，让每个变量值本身就是完整的 Tailwind 类名字符串。这样 JIT 能直接扫描到，也利于 TypeScript 类型约束和 IDE 提示。
- ✅ 正确：
const theme = { primary: 'text-blue-600 bg-white' };+className={theme.primary} - ⚠️ 注意：混入非 Tailwind 类（如
my-custom-class）需额外配safelist或content - ❌ 避免：
className={`bg-[${hex}]`}→ 改用style={{ backgroundColor: hex }}更直白、100% 生效 - 多个类名拼接时，务必用空格分隔：
"w-auto md:w-[82%] mx-10"，不能写成w-auto-md:w-[82%]-mx-10
真正难处理的是那些完全不可控的动态值——比如用户实时输入的 HEX、API 返回的任意字符串、或需要计算的 opacity/transform 值。这时候别硬套类名，style 属性就是最干净的出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
