Tailwind不扫描动态拼接类名，因其JIT引擎仅静态分析源码中写死的完整字符串字面量，不执行JS、不展开模板字符串（如text-${color}-600）、不推测变量值，故构建时无法识别并生成对应CSS规则。
为什么Tailwind不扫描动态拼接的类名
Tailwind JIT引擎只做静态分析，不执行JS、不展开模板字符串、不推测变量值。像className={`text-${color}-600`}或:class="`bg-${theme}-500`"这类写法，在源码里就是一段含${}的字符串字面量，JIT扫描器根本看不到text-red-600或bg-dark-500这样的完整类名——它们压根没在构建时“出现”过。
这不是配置漏了，也不是路径不对，是机制决定的：JIT靠文本匹配生成CSS，不是靠运行时DOM推导。
必须配置content字段并确保覆盖所有模板位置
content是safelist生效的前提。如果它没扫到你写类名的地方，safelist再全也没用——因为JIT连“哪些文件该看”都不知道。
- Vue项目要包含
./src/**/*.{vue,js,ts,jsx,tsx}，别漏.vue后缀 - Django项目得加
./templates/**/*.html和./**/*.py（模板逻辑常在Python里） - Vite/Next.js项目务必加上
.tsx、.mdx等实际用到的扩展名 - 路径必须用双引号包裹，通配符不能省略扩展名，比如
"./src/**/*"会失效
safelist怎么写才真正生效
safelist不是“加了就完事”，它必须精确匹配运行时最终生成的类名，且正则要写对边界。
立即学习“前端免费学习笔记（深入）”；
- 固定类直接写字符串：
'text-red-600'、'bg-opacity-75' - 带变量的用正则，注意完整匹配：
/^text-(red|blue|emerald)-600$/✔️，/text-.*/❌（太宽泛，生成冗余CSS） - 修饰符类必须带冒号：
/^hover:scale-\d+$/、/^dark:bg-(gray|slate)-800$/ - 颜色插值如
bg-[${hex}]无法被safelist覆盖，只能改用预定义色值或CSS变量 - safelist是数组，不是字符串数组；写成
safelist: "text-red-600"会静默失效
开发时修改safelist后必须重启服务器
JIT在启动时读取tailwind.config.js并缓存safelist规则，运行中修改不会热更新。
- 改完
safelist后，关掉npm run dev，重新执行 - 生产构建前也要确认
npm run build用了最新配置，否则打包结果仍缺样式 - 验证方式：打开浏览器开发者工具，搜索
.text-red-600，看是否出现在生成的CSS文件里
最容易被忽略的是content路径遗漏和safelist正则边界——写错一个$或漏掉dark:里的冒号，对应类名就还是白屏。
