PurgeCSS不会自动移除未引用CSS，仅删除content配置中扫描到且未匹配的类名；必须扫描构建产物JS而非源码，插件顺序须为purgecss在autoprefixer后、cssnano前，并通过safelist正则保留Tailwind变体、属性选择器及第三方库类名。
PurgeCSS 不会自动移除“未引用”的 CSS——它只删它在 content 配置里明确扫描到的、且没被匹配上的类名；你项目里 80% 的 class 是运行时拼出来的，不显式喂给它，就等于白配。
content 必须扫构建产物，不是源码文件
Vue 模板里写 class="btn {{ type }}-btn"、React 里写 className={`modal ${isOpen ? 'is-open' : ''}`，这些字符串根本不会出现在 .vue/.tsx 源文件里，而是编译后注入 JS 字符串（比如 createElement('div', { class: 'btn primary-btn' })）。PurgeCSS 默认读原始文件，自然找不到 primary-btn。
- 别用
glob.sync('./src/**/*.vue')：Windows 路径分隔符错乱，且提取不到真实类名 - 改用绝对路径扫构建产物：
path.join(__dirname, 'dist', '**', '*.js')（前提是关掉devtool: 'source-map'） - 更可靠方案：启用
modules: true（purgecss-webpack-plugin支持 AST 解析），能识别classNames(btn, type + '-btn')这类调用
@fullhuman/postcss-purgecss 插件顺序不能错
插件顺序错一位，CSS 就全空。典型表现：构建后 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 显示 “CSS 规则数为 0”。
- 必须在
autoprefixer之后：否则带前缀的选择器（如.btn:-webkit-appearance）无法匹配 - 必须在
cssnano之前：否则cssnano提前合并/重写选择器，PurgeCSS 找不到原始规则 - 正确顺序：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano配置中必须关掉重复清理：discardUnused: { discardUnused: false }
safelist 不加正则，Tailwind 变体和属性选择器必丢
默认提取器只认单词边界匹配，hover:bg-blue-500 里的 hover: 会被截断，[data-state=open] 和 [&_svg] 更是直接漏光，结果就是交互失效、图标消失。
- 保 Tailwind 变体：
/^(hover|focus|group-hover|data)-/ - 保属性选择器：
/\[.*\]/ - 保嵌套语法（如
[&_svg]）：要么自定义defaultExtractor，要么迁移到 Tailwind v3+ 内置content配置 - 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face可能被连带清除
第三方库的类名得手动“喂”，不能指望它自动识别
PurgeCSS 不处理 node_modules 中的 CSS，也不会解析 import 'bootstrap' 这种语句背后的样式依赖。它只认你源码里明文出现的字符串，而 Ant Design、Bootstrap、Swiper 这些库的类名几乎都不在源码里显式写出。
- Bootstrap：加
safelist: [/^btn-/, /^alert-/, /^modal-/] - Ant Design：加
safelist: ['ant-btn', 'ant-table', 'ant-modal']，再配合standard: ['ant-*']（注意前缀必须真实出现在你源码中） - Tailwind：启用
variants: ['hover', 'focus', 'active']并配greedy: [/^bg-/, /^text-/, /^p-/] - 别把
node_modules/**/*加进content：它只认字符串字面量，不认模块 AST 或导出逻辑
真正难的不是“怎么配”，是判断哪些 class 是静态可扫描的、哪些必须靠 safelist 或 AST 解析来兜底——尤其当你用 vite-plugin-css-injected-by-js 或动态 import() 注入 CSS 时，那些样式压根不在 content 范围内，得手动加进去，或者换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
