PurgeCSS 在 Webpack 中因执行过早、插件顺序错误或未处理动态类名，常误删真实使用的 CSS 类；需改用编译后路径扫描、调整 PostCSS 顺序、配置 safelist 或 custom extractor。
PurgeCSS 在 Webpack 中默认配置大概率会删掉真实用到的类名，不是你漏写了 class，是它根本没看到运行时生成的那些字符串。
Webpack 插件执行太早，.vue/.tsx 里的 class 没被扫到
常见现象：PurgeCSSPlugin 配了 paths: glob.sync('./src/**/*.vue')，结果构建后 hover:bg-blue-500、is-open 全没了，或者报 No files found 错误。
- 根本原因：插件在
vue-loader或@babel/preset-react处理前就运行，读到的是原始模板文本，比如class="btn {{ type }}-btn"，而真实类名（如'btn primary-btn'）藏在 JS 编译产物里 - 解决办法：改用
glob-all扫描编译后的 JS 文件路径，例如./dist/**/*.js（前提是devtool: 'source-map'关闭，否则 source map 会干扰匹配） - 更稳妥方案：启用
purgecss-webpack-plugin的modules: true选项，让它基于 AST 解析而非正则提取；或直接迁移到vite-plugin-purgecss（Vite 项目） - 路径必须是绝对路径：
path.join(__dirname, 'src', '**', '*.{js,vue,ts}')，硬写./src/**/*在 Windows 下容易失效
PostCSS 插件顺序错位，导致 CSS 被清空或白屏
常见现象：构建后页面样式全丢，DevTools 里看到 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 显示 “CSS 规则数为 0”。
- 根本原因：
@fullhuman/postcss-purgecss放在cssnano后面，后者提前合并/优化已删的选择器，产出损坏规则；或和autoprefixer顺序颠倒，导致带前缀的选择器（如.btn:-webkit-appearance）无法匹配 - PostCSS 插件顺序必须严格为：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused: { discardUnused: false }，否则和 PurgeCSS 功能重叠，可能二次误删 - 如果用了
vite-plugin-css-injected-by-js或类似 JS 注入 CSS 的插件，它的输出不在content范围内，会被直接清空——得手动加进content数组，或禁用该插件
动态类名、Tailwind 变体和特殊语法被漏删或误删
常见现象：hidden、active 类突然失效；[&_svg]、[data- 开头的属性选择器消失；group-hover:text-red-500 不生效。
- 根本原因：默认提取器不识别 Tailwind 的变体语法、属性选择器、伪类组合，也不处理运行时拼接的类名（如
class="btn ${status}-btn"） - 必须配置
safelist：用正则保留常见动态模式，例如/-(enter|leave|appear)(|-(to|from|active))$/、/^group-.*$/、/\[.*\]/ - Tailwind 用户建议直接用官方推荐的
defaultExtractor替换，或升级到 v3+ 后使用content配置配合extractors数组自定义逻辑 - 对
[data-类选择器，需在safelist中加/^data-/；对[&_svg]这类嵌套语法，PurgeCSS v4+ 支持，但需确保keyframes和fontFace也设为true
最常被忽略的一点：PurgeCSS 是静态分析工具，它不执行 JS，不渲染 DOM。所有依赖运行时逻辑生成的类名（包括 Vue 的 v-bind:class、React 的 clsx、条件拼接字符串），都必须显式列进 safelist 或通过自定义 extractor 捕获——指望它“猜中”几乎不可能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
