PurgeCSS 能精准移除无用 CSS，但需正确配置 content 路径覆盖所有类名来源、合理设置 safelist 防误删、并依构建环境选用对应插件；调试必开 rejected 选项定位问题。
直接上结论：PurgeCSS 能精准移除无用 CSS，但“精准”不等于“全自动”，它高度依赖你给的 content 路径是否覆盖所有实际使用选择器的地方，以及是否合理配置 safelist 和 blocklist。漏扫、误删、动态类名失效，基本都出在这三处。
content 配置必须覆盖所有真实类名来源
这是最常踩坑的环节。PurgeCSS 不解析 JS 运行时行为，只静态扫描文件文本 —— 所以你写的 content 列表里没包含的文件，里面的 class 就算真实渲染了，也会被删。
-
content必须显式列出所有含 class/id 的文件类型：HTML、Vue、JSX、.js（含模板字符串）、.svelte、甚至 Pug/Blade 等服务端模板 - 路径用 glob 时注意匹配深度：
src/**/*.html没问题，但src/*.html会漏掉子目录下的文件 - Vue 单文件组件要加
src/**/*.vue；React 中用className或模板字符串的.js/.jsx也得加进去 - 若项目有动态拼接类名（如
class={`${base}-active`}），仅靠content扫不出来，必须进safelist
safelist 是防止误删的必要防线
不加 safelist，Tailwind、Bootstrap、动画类、JS 控制的类（is-open、has-error）大概率被清掉。它不是可选项，是保命项。
- 静态白名单用数组：
safelist: ['active', 'disabled', 'modal-open'] - 正则匹配动态类名更实用：
safelist: [/^bg-/, /^text-/, /^is-/]（匹配所有 Tailwind 背景色、文字色、状态类） - 也可用函数动态返回白名单：
safelist: (context) => context.file.endsWith('.js') ? ['js-triggered'] : [] - 注意：
safelist作用于选择器全名，.btn-primary和btn-primary效果不同，优先写带点的完整选择器
不同构建环境的插件选型与关键差异
别硬套一种插件到所有场景。PostCSS 插件和 Webpack 插件底层都调 purgecss，但触发时机和输入源不同。
立即学习“前端免费学习笔记（深入）”；
- 用 PostCSS（如 Vue CLI、Vite、postcss-loader）：配
@fullhuman/postcss-purgecss，它在 CSS AST 最终阶段运行，能处理其他 PostCSS 插件生成的类（如 autoprefixer 添加的:focus-visible） - 用 Webpack 且抽离 CSS（mini-css-extract-plugin）：选
purgecss-webpack-plugin，它扫描的是 Webpack 构建产物中的 CSS 文件，content必须指向源码目录（如glob.sync('./src/**/*.{html,vue,js}')） - 用 Gulp/Grunt：对应
gulp-purgecss或grunt-purgecss，它们按文件流处理，content同样需 glob 展开，但不感知 Webpack 模块图 - 避免重复清理：如果已用 PostCSS 插件，就别再加 Webpack 插件，否则可能把刚生成的类又删了
rejected 选项是调试误删的唯一可靠手段
上线前发现样式丢了？别猜，开 rejected: true，让它输出被删的选择器列表，一眼定位问题源头。
- PostCSS 插件中启用：
purgecss({ content: [...], rejected: true })，结果会作为 PostCSS message 输出到控制台 - Webpack 插件中：
new PurgeCSSPlugin({ ..., rejected: true })，会在构建日志末尾打印被删规则 - CLI 中加
--rejected参数，直接输出到终端或文件 - 看到
.fade-enter-active被删？说明你的 Vue 动画类没进content或safelist—— 这比翻几十个文件找线索快得多
真正难的不是配置参数，而是确认「哪些类是动态生成的」「哪些文件里藏着隐藏的 class 引用」。每次改完 content 或 safelist，务必用 rejected 跑一遍，盯着输出看有没有不该删的。静态分析工具永远需要人工校验边界。
