PurgeCSS默认不处理node_modules中的CSS，因其采用白名单机制，仅扫描content配置中指定路径下的字符串字面量类名，而import语句和第三方库CSS文件本身不会生成可提取的类名，故需通过safelist手动保留。
PurgeCSS 能移除引入文件里的未用 CSS，但默认配置下几乎不生效——它根本不会去扫 node_modules 里的 CSS 文件，更不会理解你 import 'bootstrap' 这种写法背后到底用了哪些类。
为什么 PurgeCSS 默认不处理 node_modules 中的 CSS
PurgeCSS 的清理逻辑是“白名单制”：它只保留你在 content 配置里明确列出路径下实际出现过的类名。而像 Bootstrap、Ant Design、Tailwind 这类库的 CSS 文件（比如 node_modules/bootstrap/dist/css/bootstrap.min.css）本身不会出现在你的 JS/HTML 源码字符串中；import 或 @import 语句也不会被解析为 class 引用，插件压根不知道这些样式存在。
它扫描的是你项目源码中的字符串字面量，不是模块依赖图。即使你把 node_modules/**/*.css 加进 css 数组，只要没在 content 里看到对应类名，整条规则都会被干掉。
- 常见错误现象：
.btn、.modal看似还在，但体积只少了不到 5%，说明 PurgeCSS 压根没识别出哪些该删 - Tailwind 的
@layer或@apply生成的选择器，若没在模板/JS 中显式写出（比如class="hover:bg-blue-500"），也不会被识别 - 第三方库的 class 往往藏在运行时拼接字符串里（如
className={`btn ${type}-btn`}），静态扫描自然漏光
如何让第三方库的 CSS 真正被 PurgeCSS 处理
必须手动把库中你实际用到的组件类名“喂”给 PurgeCSS。这不是妥协，而是必要操作——因为 PurgeCSS 无法静态推断你用了哪些组件。
立即学习“前端免费学习笔记（深入）”；
- Bootstrap：加
safelist:[/^btn-/, /^alert-/, /^modal-/]，避免按钮、提示、模态框样式消失 - Tailwind：启用
variants: ['hover', 'focus', 'active']并配greedy: [/^bg-/, /^text-/, /^p-/]，否则hover:bg-red-600这种变体全丢 - Ant Design：加
safelist:['ant-btn', 'ant-table', 'ant-modal']，再配合standard: ['ant-*']（注意ant-前缀必须真实出现在你源码中，否则无效） - 慎用
fontFace: true和keyframes: true，否则动画和字体可能被误删
别指望靠 content: ['node_modules/**/*'] 让它自动扫出类名——它只认你写的字符串，不认依赖包的 AST 或导出逻辑。
Webpack 构建中真正起效的配置位置
别在 postcss.config.js 里单独配 @fullhuman/postcss-purgecss——它会和 cssnano 冲突，且执行时机早于 JS 编译，扫不到 className={styles.btn} 这类动态绑定。
改用 purgecss-webpack-plugin，并在 plugins 数组中放在 MiniCssExtractPlugin 之后、OptimizeCSSAssetsPlugin 之前。
-
paths必须是绝对路径：path.join(__dirname, 'src', '**', '*.{js,vue,ts}')，硬写./src/**/*在 Windows 下容易失效 - 如果项目用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的方案，它的输出不在content范围内，会被直接清空——得手动加进content数组，或禁用该插件 - PostCSS 插件顺序必须严格为：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano配置中必须关掉discardUnused: { discardUnused: false }，否则和 PurgeCSS 重复干活，可能二次误删
动态类名和 Tailwind 变体为何总被误删
默认提取器只认单词边界匹配，hover:bg-blue-500 里的 hover: 会被截断，[data-state=open] 和 [&_svg] 这种语法也容易被忽略，结果就是交互失效、样式丢失。
- 加正则保变体：
/^(hover|focus|group-hover|data)-/ - 保属性选择器：
/\[.*\]/ - 保嵌套语法（如
[&_svg]）：需自定义defaultExtractor，或直接迁移到 Tailwind v3+ 内置的content配置（推荐） - 确保
keyframes: true和fontFace: true开启，否则@keyframes和@font-face规则可能被连带清除
最常被忽略的一点：PurgeCSS 不是“删掉没用的”，而是“只留下它看见的”。你写的动态类名如果没在最终打包的 JS 字符串里显式出现，它就真看不见——哪怕浏览器里跑得好好的。
