purgecss在webpack生产构建中能剔除未用css，但默认配置会漏删动态类名、tailwind变体及框架编译后class，因插件执行过早、提取器不识别运行时生成内容，需调整路径、顺序并配置safelist。
直接上结论：PurgeCSS 能在 Webpack 生产构建中有效剔除未使用的 CSS，但默认配置下大概率会删掉动态类名、Tailwind 变体（如 hover:bg-blue-500）、或 Vue/React 编译后的 class 字符串——不是你配错了，是它根本没看到那些内容。
Webpack 插件执行太早，.vue/.tsx 文件扫不到真实 class
常见现象：PurgeCSSPlugin 配置了 paths: glob.sync('./src/**/*.vue')，结果构建后所有 Tailwind 工具类全没了，或者 No files found 报错。
根本原因：Webpack 插件运行在 vue-loader 或 @babel/preset-react 处理之前，读到的是原始 .vue 模板文本，里面 class="btn {{ type }}-btn" 这种写法不会被提取器识别；而真正的 class 字符串是在 JS 编译产物里（比如 createElement('div', { class: 'btn primary-btn' })）。
- 改用
glob-all扫描编译后产物路径，例如./dist/**/*.js（需确保devtool: 'source-map'关闭，否则 source map 会干扰匹配） - 更稳妥的做法：换用支持 AST 解析的模式，比如
purgecss-webpack-plugin的modules: true选项，或直接迁移到vite-plugin-purgecss（Vite 项目） - 路径必须是绝对路径：
path.join(__dirname, 'src', '**', '*.{js,vue,ts}')，硬写./src/**/*在 Windows 下容易失效
PostCSS 插件顺序错位，导致 CSS 被清空或白屏
常见现象：构建后页面样式全丢，DevTools 里看到 CSS 文件只剩 @charset "UTF-8";，或者 Lighthouse 显示 “CSS 规则数为 0”。
根本原因：@fullhuman/postcss-purgecss 放在 cssnano 后面，后者会提前合并/优化已删的选择器，产出损坏规则；或和 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 特殊语法（如 [&_svg]）被漏删或误删
常见现象：is-open、hidden 类突然失效；[&_svg]、[data-theme="dark"] 对应的样式消失；@apply hover:bg-red-600 中的 hover: 类没保留。
根本原因：PurgeCSS 默认提取器只识别基础 class="xxx" 字符串，不解析 CSS 嵌套语法、伪类变体、属性选择器或 JS 拼接逻辑。
- 用
safelist显式保留：safelist: [/^hover:/, /^focus:/, /^data-theme/, /^is-/, /^hidden$/] - 对 Tailwind 变体，推荐用
variants配置（仅限 PostCSS 插件）：variants: ['hover', 'focus', 'active', 'disabled'] - 对
[&_svg]这类嵌套选择器，需自定义defaultExtractor，让它能提取&_svg中的_svg部分，或直接加进greedy白名单：greedy: [/^_svg/, /&_[a-z]+/]
真正难的不是配置 PurgeCSS，而是判断哪些 class 是“静态可见”的、哪些是“运行时才存在”的。Vue 的 v-bind:class、React 的 clsx、甚至 el.classList.toggle('active')，这些都不会出现在源码字符串里——它们只存在于打包后的 JS AST 中。想覆盖全部，要么换 AST 解析方案，要么老老实实把高频动态模式写进 safelist。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
