safelist不是兜底开关而是精准声明，必须用RegExp字面量如/^(?:md|lg):text-red-(?:500|600)$/，漏配content路径或正则语法错误（如用字符串而非/^...$/）将导致规则失效。
safelist 不是“兜底开关”，而是精准声明——写错一个正则括号，整条规则就失效；漏配一个 content 路径，safelist 根本没机会运行。
为什么 md:text-red-500 总被删掉？
因为 Tailwind 的 JIT 扫描器只认源码里**完整、静态、不间断出现的字符串**。你写了 text-red-500，它不会自动推导出 md:text-red-500 或 hover:text-red-500。
- 错误写法：
/^text-red-500$/→ 完全不匹配带前缀的变体 - 正确写法：
/^(?:md|lg|hover):text-red-(?:500|600)$/→ 非捕获组(?:...)必须用，否则正则语法错误导致整条 pattern 失效 - 别贪快写
/^.*text-red.*$/—— 会意外保留text-red-clip、text-red-overflow等非法类，构建时无报错但体积暴涨
safelist 中的正则必须用 /^...$/ 字面量，不能用字符串
这是最容易踩的硬性语法坑：Tailwind 只接受 RegExp 字面量，"^text-red-\d+$" 这种字符串写法会被忽略，且不报错。
- ✅ 正确：
{ pattern: /^text-(red|blue|green)-d+$/ } - ❌ 错误：
{ pattern: "^text-(red|blue|green)-\d+$" }（根本不起作用） - 动态值来自 CMS 或 JSON 配置（如
item.className = "bg-blue-500"）也得进safelist，因为静态扫描看不到运行时字段
content 路径没配全，safelist 就是摆设
safelist 只负责“保类”，但前提是 Tailwind 先扫到你用了动态逻辑——而扫描范围由 content 决定。漏掉路径，等于把源码藏起来让它看不见。
- React/TSX 项目必须显式包含
"./src/**/*.{js,jsx,ts,tsx}"，漏掉.tsx后缀，整个组件目录就逃过扫描 - Next.js 项目还要加
"./app/**/*.{js,jsx,ts,tsx}"，否则 Server Components 里的类名不会触发safelist - 使用 CSS 变量如
bg-[var(--bg-surface)]，必须确保该字符串真实出现在 JSX/HTML 文件中，且content包含对应路径（如"./src/**/*.{tsx}"）
什么时候该停手，改用 clsx 或 @apply？
当 safelist 开始写成 /^w-.*/、/^p-.*/ 这种宽泛模式时，说明动态范围失控了——这不是配置问题，是设计问题。
立即学习“前端免费学习笔记（深入）”；
- 有限枚举值（如
line-clamp-[1-6]、size-sm/md/lg）适合safelist+ 正则 - 高频互斥状态（如
isSuccess ? "text-green-600" : "text-red-600"）优先用clsx列出所有字面量，让 JIT 自动识别 - 重复组合（如按钮所有变体）应提取为
@apply类，收口到 CSS 文件里，比维护白名单更可靠、更易测试
safelist 必须重启开发服务器（npm run dev），JIT 缓存不会自动刷新；而且构建后要开 debug: true 看控制台输出的 preserved 类统计——如果某条 pattern 贡献了上千个类，基本可以确定它写得太宽了。 
