动态类名在生产环境消失的根本原因是safelist未配置或content路径遗漏，二者必须同时生效；purgecss仅匹配字面量字符串，不推导前缀变体，正则需用非捕获组精确匹配如/^(?:md|lg|hover):text-red-(?:500|600)$/，动态拼接需safelist兜底，content路径须全覆盖含class的文件。
动态类名在生产环境消失，不是 Tailwind 有问题，而是 safelist 没配对或 content 路径漏了——这两者必须同时生效，缺一不可。
为什么正则写对了还是漏掉 md:text-red-500
PurgeCSS 只扫描源码中**字面量出现的完整字符串**，不会推导前缀变体。你写了 text-red-500，它不会自动保留 md:text-red-500 或 hover:text-red-500。
- 错误写法：
/^text-red-500$/—— 完全不匹配带前缀的类 - 正确写法：
/^(?:md|lg|hover):text-red-(?:500|600)$/—— 非捕获组(?:...)必须用，否则正则语法错误导致整条 pattern 失效 - 如果项目只用
sm/md和red/green，就别写.*，收敛范围更安全
动态拼接类名（如 text-${color}-500）怎么加进 safelist
这种模板字符串在构建时被看作 text-${color}-500 字面量，PurgeCSS 根本看不到 text-red-500 这个完整串，所以必须靠 safelist 主动兜底。
- 推荐用函数式 pattern：
{ pattern: /text-(red|blue|green)-\d+/ } - 避免宽泛写法：
/text-.*/会意外保留text-clip、text-overflow等原生 CSS 属性 - 如果
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]$/ - 启用
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}"和"./pages/**/*.{js,jsx,ts,tsx}" - Laravel 项目要覆盖
"./resources/**/*.blade.php"；Flask + Jinja2 要写"./templates/**/*.html" - Vue 项目若用
.vue单文件组件，content必须包含"./src/**/*.{vue}"，否则safelist形同虚设
真正容易被忽略的是：safelist 的正则必须和 content 扫描结果协同工作——前者兜底“运行时才确定的类”，后者决定“哪些文件里的类值得扫描”。两者脱节，再精准的正则也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
