因为PurgeCSS仅匹配源码中字面量出现的完整类名字符串，md:text-red-500与text-red-500是两个独立字符串，需在safelist正则中显式包含变体前缀，如/^(?:md|lg|hover):text-red-(?:500|600)$/。
为什么safelist里的正则总匹配不上 md:text-red-500
PurgeCSS（或 Tailwind 的 Oxide 扫描器）只匹配源码中**字面量出现的完整类名字符串**，不是运行时拼出来的。你写了 text-red-500，它就只认这个；md:text-red-500 是另一个独立字符串，必须显式保留在 safelist 里。
常见错误写法：/^text-red-500$/ —— 它完全不匹配带变体前缀的类名。
正确做法是把变体前缀纳入正则：
-
/^(?:md|lg|hover):text-red-(?:500|600)$/：非捕获组(?:...)防止语法错误，括号必须用对 - 如果项目只用
sm/md和red/green，就别写.*，收敛范围更安全 - 避免
/text-.*/这种宽泛写法——它会意外保留text-clip、text-overflow等原生 CSS 属性
动态拼接类名（如 text-${color}-500）怎么加进 safelist
像 className={`text-${color}-500`} 这种写法，PurgeCSS 根本看不到 text-red-500 这个字符串，只看到模板字面量 text-${color}-500，所以必须靠 safelist 主动兜底。
推荐用函数式 pattern 写法，比字符串数组更可控：
-
{ pattern: /text-(red|blue|green)-\d+/ }：精准覆盖你实际用到的颜色和数字组合 - 如果
color来自 JSON 配置或 CMS 字段（如item.classNames = "text-red-500"），这些字符串也不会被静态扫描到，也得加进safelist - 优先考虑重构：把动态逻辑收口到组件内部，用
@apply封装成静态类，比依赖白名单更可靠
safelist 写太宽导致 CSS 体积暴增怎么办
safelist 不是“越宽越好”。写错一个点，可能让几百个未用类逃过清理。
比如 /^w-/ 会保留全部 w-* 工具类（w-1/2、w-screen、w-max…），体积反弹明显。
更合理的写法是按实际取值收敛：
/^w-(1\/2|full|fit|auto)$/-
/^w-[1-9]$/（匹配w-1到w-9） - 启用
debug: true后构建，看控制台输出的preserved类统计——如果某条 pattern 贡献了上千个类，大概率写得太宽了 - 字符串形式的白名单（如
'bg-opacity-50'）只保单个类，适合零星关键类；正则适合批量模式，但必须验证边界
content 路径没配对时 safelist 也救不了你
safelist 只兜底“动态类名”，但前提是 content 配置完整覆盖了所有含 class 字面量的文件路径。漏掉路径，连 safelist 都没机会生效。
React/TSX 项目必须显式包含：
-
"./src/**/*.{js,jsx,ts,tsx}"：漏掉.tsx就等于把整个组件目录排除在外 - Next.js 要同时加
"./app/**/*.{js,jsx,ts,tsx}"和"./src/**/*.{js,jsx,ts,tsx}"（取决于你的目录结构） - Vue 项目注意是否漏了
.vue扩展名
真正容易被忽略的是：.gitignore 里的路径默认不扫——Oxide 扫描器（Tailwind v3.3+ 默认 Rust 实现）会主动读取 .gitignore 并硬性排除其中路径，哪怕你显式写进了 content 数组。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
