PurgeCSS默认不处理node_modules的CSS，因其仅扫描content配置中明确路径下的字面量类名，而第三方库的类名藏在依赖文件或运行时拼接中；必须通过safelist显式保留，如/^btn-/、'ant-btn'等，并确保PostCSS顺序正确、关闭cssnano的discardUnused。
PurgeCSS 能删掉第三方库的未用 CSS，但默认不生效——它只认你 content 里明确扫到的类名，而库的 class 往往藏在 node_modules 或运行时拼接字符串里，根本不会被提取。
为什么 PurgeCSS 默认对 node_modules 的 CSS “视而不见”
PurgeCSS 的清理逻辑是“白名单制”：它只保留你在 content 配置中指定路径下实际出现过的类名。而像 Bootstrap、Tailwind、Ant Design 这类库，其 CSS 文件本身（如 node_modules/bootstrap/dist/css/bootstrap.min.css）不会出现在你的 JS/HTML 源码中；你写的 import 'bootstrap' 或 @import 'bootstrap' 不会被解析为 class 引用，插件压根不知道这些样式存在。
- 它扫描的是你项目源码中的字符串字面量，不是模块依赖图
- 即使你把
node_modules/**/*.css加进css数组，只要没在content里看到对应类名，整条规则都会被干掉 - Tailwind 的
@layer或@apply生成的选择器，若没在模板/JS 中显式写出（比如class="hover:bg-blue-500"），也不会被识别
必须手动把库的 class 显式“喂”给 PurgeCSS
最直接有效的方式，是把库中你**实际用到的组件类名**列进 safelist，或用正则匹配其命名模式。这不是妥协，而是必要操作——因为 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，否则动画和字体可能被误删
Webpack 构建中真正起效的配置位置
别在 postcss.config.js 里单独配 @fullhuman/postcss-purgecss——它会和 cssnano 冲突，且执行时机早于 JS 编译，扫不到 className={styles.btn} 这类动态绑定。
立即学习“前端免费学习笔记（深入）”；
- 改用
purgecss-webpack-plugin，并在plugins数组中放在MiniCssExtractPlugin之后、OptimizeCSSAssetsPlugin之前 -
paths必须是绝对路径：path.join(__dirname, 'src', '**', '*.{js,ts,vue,jsx,tsx}')，./src/**/*在 Windows 下常失效 - 如果用了
css-in-js注入（如vite-plugin-css-injected-by-js），它的输出不在content范围内，得手动把产出 JS 路径加进去，比如./dist/**/*.js - 关闭
devtool: 'source-map'，否则 source map 内容干扰类名提取，导致漏删或报错No files found
最容易被忽略的致命细节
很多人调通了配置却还是白屏，问题往往出在 PostCSS 插件顺序和 cssnano 的二次清理上。
-
@fullhuman/postcss-purgecss必须排在autoprefixer之后、cssnano之前；否则带前缀的选择器（如.btn:-webkit-appearance）无法匹配 -
cssnano的discardUnused: { discardUnused: false }必须关掉，否则它会基于 PurgeCSS 清理后的 CSS 再删一遍，把刚留下的 hover/focus 类也干掉 - Vue 项目里
class="btn {{ type }}-btn"这种写法，PurgeCSS 根本看不到type的值，只能靠safelist保底，或者改用class="btn" :class="`${type}-btn`"并把type的所有可能值列进白名单
动态类名不是 PurgeCSS 的缺陷，而是它设计上的取舍：它不做运行时分析，只做静态文本匹配。想让它“懂”你的代码，就得主动告诉它哪些模式不能动。
