purgecss并非自动剔除引入库未用css，而是依赖显式配置content路径扫描字符串字面量类名；它不处理node_modules中css，第三方库类名须通过safelist正则或精确匹配手动保留。
PurgeCSS 并不能“自动”剔除引入文件中未使用的 CSS——它只在你明确告诉它“哪些地方可能出现类名”时，才去比对、删除。所谓“自动”，其实是静态扫描 + 显式配置的结果，不是魔法。
它只扫你指定的 content 路径，不扫 node_modules 里的 CSS
PurgeCSS 的清理逻辑是白名单驱动：它提取 content 配置里列出的所有文件（如 ./src/**/*.tsx）中的字符串字面量类名（比如 class="btn-primary" 或 className="modal-show"），再拿这些类名去匹配 CSS 文件里的选择器。
而你 import 'bootstrap' 或 @import 'tailwindcss' 的行为本身不会产生可被提取的类名字符串，node_modules 下的 CSS 文件也不会被当作“内容源”扫描。
所以：
- bootstrap.min.css 里的 .alert-danger 不会被删，**不是因为它被用了，而是因为你根本没让它进扫描范围，它压根没参与比对**
- 你模板里写了 class="alert-danger"，它才会被保留；没写，哪怕你 JS 里动态拼了 "alert-" + type，它也大概率被删
第三方库的类名必须靠 safelist “喂”进去
PurgeCSS 无法推断你用了 Ant Design 的 Modal 组件，更不知道它会生成 ant-modal 这个类。它只认你源码里明文出现的字符串。
所以必须手动加白名单：
- 正则匹配：如 /^ant-/、/^btn-/
- 精确类名：'ant-btn'、'swiper-slide'
- 注意：safelist 中的字符串必须和最终生成的 class 完全一致（包括前缀、连字符），否则无效
Webpack 构建中真正起效的位置很关键
把@fullhuman/postcss-purgecss 放在 postcss.config.js 里，基本等于失效：
- 它运行在 JS 编译前，扫不到 className={styles.btn} 或 class="p-4 {{ modifier }}" 这类模板语法
- 它和 cssnano 冲突，尤其 discardUnused: true 会二次清空已删规则，导致白屏
正确做法是：
- 用 purgecss-webpack-plugin，插件放在 MiniCssExtractPlugin 之后、OptimizeCSSAssetsPlugin 之前
- paths 必须是绝对路径：path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}')
- 关闭 devtool: 'source-map'（否则 source map 干扰类名提取）
动态类名、Tailwind 变体（如 hover:bg-blue-500）、属性选择器（如 [data-open]）都不会被默认提取器识别，除非你配了 defaultExtractor 或改用支持 AST 的方案（如 vite-plugin-purgecss）。
别指望“配完就瘦身成功”——漏删或误删，几乎总是配置粒度不够细、路径没对上、或 safelist 没兜住运行时真实 class 的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
