purgecss无法识别vue中:class动态拼接的类名，因其仅扫描源码文本而不执行js；必须通过safelist正则明确保留运行时生成的类（如/^btn-(primary|danger|success)$/），并确保content配置覆盖所有含动态class的文件路径，webpack需启用modules: true或改用vite-plugin-purgecss以支持ast分析。
Vue里:class动态拼接的class根本不会被PurgeCSS看到
PurgeCSS只扫描源码文本，不执行JS逻辑。你写v-bind:class="`btn btn-${type}`"，它只看到btn和btn-${type}两个字符串，完全不知道btn-primary会在运行时出现。这不是配置漏了，是机制决定的——它连type变量值都读不到。
必须用safelist正则匹配最终渲染出的类名
不能靠扫描路径“猜”，得明确告诉PurgeCSS哪些类名要留。正则必须覆盖真实生成结果，不是模板占位符：
-
/^btn-(primary|danger|success)$/→ 保留btn-primary等，但不包括btn-warning -
/^(?:md|hover|focus):btn-(?:primary|danger)$/→ 匹配hover:btn-primary这类Tailwind变体 -
/^text-[0-9]+$/→ 若项目中真有text-12这种硬编码尺寸，就得单独列出来 - 别写
/btn-.*/——会意外保住btn-group（Bootstrap）或btn-clip（CSS属性）
content路径必须覆盖所有含动态class的JS/TS文件
Tailwind v3+的content配置不递归解析import。你在composables/useButton.ts里写computed(() => `btn-${props.type}`)，这个TS文件没被content glob匹配到，里面的字符串就彻底隐身。
- 确保路径包含：
src/**/*.{vue,ts,js,jsx,tsx} - 用
import.meta.glob动态导入的路由组件，其路径不会被glob自动捕获，得手动加进content数组 - 验证方法：临时注释掉
content字段，跑一次build；如果样式全回来了，就是漏了来源文件
Webpack插件模式下启用modules: true才能识别AST级拼接
purgecss-webpack-plugin默认走字符串提取，对classNames(btn, type + '-btn')这类调用无能为力。开启modules: true后，它会解析JS AST，真正理解type + '-btn'是在拼字符串。
- 启用后，
safelist可大幅精简，甚至部分场景可去掉 - 注意：这要求你的JS/TS已由babel或tsc编译完成，不能在loader链太前面介入
- 若用Vite，直接换
vite-plugin-purgecss更省心，它原生支持AST分析
is-open可能是你手写的，也可能是第三方库注入的；data-state=open这种属性选择器，PurgeCSS默认不认，得靠extractors自定义提取逻辑。别指望一个正则或一个glob能兜住全部。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
