purgecss默认仅删除静态可见类名，无法识别运行时拼接的动态类名；需通过ast解析、safelist正则、调整postcss顺序（purgecss必须在cssnano前）、关闭source-map及正确配置content路径来避免误删hover:bg-blue-500、is-open等真实使用的样式。
PurgeCSS 默认不会“彻底清除”冗余 CSS——它只删它看得到的类，而绝大多数真实项目里，大量 class 是运行时拼出来的。直接配 paths 或 content 扫源码文件，大概率把 hover:bg-blue-500、is-open、hidden 全干掉。
Webpack 中 PurgeCSSPlugin 扫不到 .vue/.tsx 里的动态 class
插件在 vue-loader 或 @babel/preset-react 处理前就运行，读到的是原始模板：class="btn {{ type }}-btn"，根本没 primary-btn 这个字符串。
- 别用
glob.sync('./src/**/*.vue')—— Windows 下路径失效，且扫的是未编译文本 - 改用绝对路径：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}') - 更可靠方案：启用
modules: true（purgecss-webpack-plugin支持 AST 解析），或直接换vite-plugin-purgecss（Vite 项目） - 若用
devtool: 'source-map'，关掉它，否则 source map 会污染类名匹配
PostCSS 插件顺序错位导致 CSS 全空
构建后 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 显示 “CSS 规则数为 0”，基本就是顺序崩了。
- 必须严格按顺序写：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused: { discardUnused: false }，否则和PurgeCSS重复干活，可能二次误删 - 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在content范围内，会被清空——得手动加进content数组，或禁用该插件
Tailwind 变体、属性选择器和动态类名被漏删
group-hover:text-red-500 没生效、[data-state=open] 样式消失、className={`modal ${isOpen ? 'is-open' : ''}` 里的 is-open 被删光，都是默认提取器不认这些模式。
- 在
safelist加正则：/^(hover|focus|group-hover|data)-/、/\[.*\]/ - 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face会被连带清除 - 对
[&_svg]这类嵌套选择器，需自定义defaultExtractor或用 Tailwind v3+ 内置的content配置（推荐） - Tailwind 项目别额外装
@fullhuman/postcss-purgecss—— 它和tailwindcss的内置 Purge 功能冲突，删掉 postcss.config.js 里多余的 purgecss 插件
safelist 或 AST 解析兜底；尤其当项目混用 JSX 拼接、Vue 指令、JS 注入 CSS 时，content 列表很容易漏掉某类产出路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
