purgecss不会自动识别运行时拼接的class，仅扫描字符串字面量，需通过绝对路径content配置、正确postcss顺序、safelist正则及禁用cssnano重复清理来避免误删hover:bg-blue-500等真实样式。
PurgeCSS 不会自动识别运行时拼接的 class，直接配 content 路径大概率删掉 hover:bg-blue-500、is-open、hidden 等真实用到的样式。
content 配置必须覆盖所有动态类来源文件
它只扫描字符串字面量，不执行 JS，也不解析 Vue/React 的响应式绑定逻辑。你写 className={`modal ${isOpen ? 'is-open' : ''}`}，PurgeCSS 看不到 is-open 这个字符串。
- 路径必须用绝对路径或可靠 glob：
path.join(__dirname, 'src', '**', '*.{js,ts,jsx,tsx,vue}')，别写./src/**/*.vue（Windows 下失效） - 如果用了
vite-plugin-css-injected-by-js这类 JS 注入 CSS 的插件，它的输出不在content范围内，得手动加进数组，或禁用该插件 - 第三方组件库的 class 名（如
ant-btn）需用safelist或正则保留：/^ant-/
PostCSS 插件顺序错位会导致 CSS 全空
构建后 CSS 文件只剩 @charset "UTF-8";，或 Lighthouse 显示 “CSS 规则数为 0”，基本就是顺序崩了。
- 必须严格按顺序写：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉重复清理：{ discardUnused: false }，否则和 PurgeCSS 冲突，可能二次误删 - 别在
devtool: 'source-map'开启时跑 PurgeCSS——source map 会污染类名匹配，导致漏删或误删
Tailwind 项目别额外装 @fullhuman/postcss-purgecss
Tailwind v3+ 自带 content 配置，和内置 Purge 功能完全兼容；多装一个插件反而冲突，删掉 postcss.config.js 里多余的 purgecss 插件就行。
- 启用
keyframes: true和fontFace: true，否则@keyframes和@font-face会被连带清除 - 对
group-hover:text-red-500、[data-state=open]这类变体和属性选择器，加正则到safelist：/^(hover|focus|group-hover|data)-/、/\[.*\]/ -
[&_svg]这类嵌套选择器需自定义defaultExtractor，或直接升级 Tailwind 到 v3.3+ 使用其原生content提取逻辑
真正难的不是“怎么配”，是确认所有动态类都落在 PurgeCSS 的视野里——它不猜、不执行、不推断，只信你给它的字符串和正则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
