PurgeCSS删不掉动态类名是因为它只识别静态字符串，无法感知运行时拼接、JS注入或模板字符串中的类名；需通过safelist显式保留、配置custom extractors或改用支持AST解析的模式。
PurgeCSS 在 Webpack 中删不掉动态类名，不是配置漏了，是它根本没看到那些字符串。 它只认静态写死的 class="btn active"，对 className={`btn ${type}-btn`} 或 el.classList.add('hidden') 这类运行时拼接、注入的行为完全无感。默认扫描路径再全也没用。
Webpack 插件里 paths 配置为什么总扫不到 .vue/.tsx 文件
常见错误现象：PurgeCSSPlugin 构造时传的 paths 用 glob.sync('./src/**/*.vue')，但构建后发现所有 Tailwind 工具类都被清空了；No files found 报错或输出 CSS 体积没变。
根本原因：Webpack 插件执行时机太早，此时 .vue 还没被 vue-loader 编译成 JS 字符串，PurgeCSS 扫的是原始模板，里面没有 class 字面量。
- 改用
glob-all+ 显式扩展名组合，确保覆盖编译产物路径（如./dist/**/*.js），但更稳妥的是—— - Vue/React 项目直接换
vite-plugin-purgecss或purgecss-webpack-plugin的modules模式（支持解析 AST） - 路径必须是绝对路径，
path.join(__dirname, 'src', '**', '*.{js,vue}')比硬写./src/**/*.vue更可靠，尤其在 Windows 下
postcss.config.js 里插件顺序错位导致白屏或空 CSS
常见错误现象：构建后页面样式全丢，DevTools 里看到 CSS 文件内容为空，或只剩 @charset "UTF-8";；Lighthouse 报“CSS 规则数为 0”。
立即学习“前端免费学习笔记（深入）”；
根本原因：@fullhuman/postcss-purgecss 放在 cssnano 后面，后者把已删的选择器相关声明合并优化，产出损坏规则；或者和 autoprefixer 顺序颠倒，导致带前缀的选择器无法匹配。
- 正确顺序固定为：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused：{ discardUnused: false }，否则和 PurgeCSS 功能重叠，可能二次误删 - 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在 PurgeCSScontent范围内，会被直接清空——得手动加进content数组或禁用该插件
动态类名、Tailwind 特殊语法（如 [&_svg]）被漏删或误删
常见错误现象：hidden、is-open 突然失效；[&_svg]、[data-theme="dark"] 对应的样式消失；@apply bg-red-500 hover:bg-red-600 中的 hover: 类没保留。
根本原因：PurgeCSS 默认提取器只识别基础 class/id 字符串，不解析 CSS 嵌套语法、属性选择器、伪类、Tailwind 的变体前缀。
- 必须配
defaultExtractor自定义提取逻辑，例如 Vue 项目中过滤掉<style></style>块再正则提取：content.replace(/<style>/gi, '')</style> - Tailwind 项目优先用
tailwind.config.js的content字段（v3.0+ 内置 Purge），它自带适配@apply和变体的 extractor - 动态类名用
safelist（新版叫法，兼容whitelistPatterns）：safelist: [/^active-/, /^is-/]，别写成字符串数组 - 动画类、字体、关键帧需显式开启：
keyframes: true、fontFace: true
最常被忽略的一点：PurgeCSS 不处理 JS 里通过 document.createElement 或 innerHTML 动态插入的 HTML 字符串，这类 class 必须进 safelist，且正则要覆盖所有可能生成的组合形式。
