PurgeCSS 默认会误删真实使用的动态类名，因其仅扫描静态字符串而无法识别运行时拼接、JS注入或框架编译后的class；需改用编译后路径扫描、调整PostCSS插件顺序、配置safelist正则及启用AST解析模式。
PurgeCSS 能剔除多余 CSS，但直接配进 Gulp 或 Webpack 默认流程，大概率会删掉真实在用的类——不是你漏写了路径，而是它根本没看到运行时生成的 class。
Webpack 中 PurgeCSSPlugin 扫不到 .vue/.tsx 里的动态 class
PurgeCSSPlugin 默认只读原始文件内容，而 Vue 单文件组件里写 class="btn {{ type }}-btn"、React 里写 className={<code>modal ${isOpen ? 'is-open' : ''}，这些字符串在 JS 编译前根本不存在；插件扫描 ./src/*<em>/</em>.vue 只拿到模板文本，提取不出 is-open 这种运行时拼接的类。
- 必须让插件扫描编译后的 JS 输出（如
./dist/*<em>/</em>.js），前提是关闭devtool: 'source-map'，否则 source map 会干扰类名匹配 - 更稳妥的做法是启用
modules: true选项，让插件基于 AST 解析模块依赖，而非正则提取字符串 - Windows 下路径必须用
path.join(__dirname, 'src', '*<em>', '</em>.{js,vue,ts}')，硬写./src/*<em>/</em>会失效
PostCSS 插件顺序错位导致 CSS 全空或白屏
@fullhuman/postcss-purgecss 如果放在 cssnano 后面，后者会提前合并/重写选择器，PurgeCSS 再去删就找不到原始规则了；如果放在 autoprefixer 前面，带前缀的选择器（比如 .btn:-webkit-appearance）压根不会被识别。
- PostCSS 插件顺序必须严格为：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano配置里必须关掉discardUnused: { discardUnused: false }，否则和 PurgeCSS 功能重叠，可能二次误删 - 若用了
vite-plugin-css-injected-by-js或类似 JS 注入 CSS 的方案，它的输出不在content范围内，会被直接清空——得手动加进content数组，或禁用该插件
Tailwind 变体和属性选择器被漏删或误删
hover:bg-blue-500、group-hover:opacity-100、[data-state=open]、[&_svg] 这些不是普通类名，而是 Tailwind 编译后生成的选择器。默认提取器只认单词边界匹配，hover: 会被截断，[data-state=open] 这种属性选择器也容易被忽略。
- 在
safelist里加正则：/^(hover|focus|group-hover|data)-/、/[.*]/ - 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face规则可能被连带清除 - 对于
[&_svg]这类嵌套语法，确保 Tailwind 的content配置已包含对应组件路径，且 PurgeCSS 的defaultExtractor没被粗暴覆盖
真正难的不是“怎么配”，而是哪些 class 是真正在用、但 PurgeCSS 看不见的。Tailwind 的变体、框架的运行时 class 绑定、JS 动态插入的样式节点——这些地方最容易出 silent failure：构建成功、没报错、但某个 hover 效果突然没了。上线前务必在真实环境点开 DevTools，搜几个关键 class，确认它们还在最终 CSS 文件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
