unocss动态类名仅在开发环境生效，因其默认仅提取源码中字面量出现的类名，而v-bind:class="text-${color}"等运行时拼接无法被ast解析，致生产构建缺失对应规则。
UnoCSS动态类名为什么只在开发环境生效
因为UnoCSS默认只提取源码中“字面量出现”的类名，v-bind:class="`text-${color}`这种拼接字符串在构建阶段无法被AST解析出所有可能的组合，导致生产构建时对应规则压根没生成。
哪些写法会被UnoCSS漏掉
常见漏掉场景包括：
-
v-bind:class里用模板字符串拼接，如`bg-${theme}-500` - JS变量拼接后赋值给class，如
const cls = `text-${size}`+:class="cls" - v-html注入的HTML含动态class（如富文本渲染）
- 第三方库运行时生成的class（比如某些UI组件的内部逻辑）
怎么让动态类名被识别
核心思路是：让UnoCSS在编译期“看见”所有可能的组合。有三种可靠做法：
- 静态声明所有变体：在组件里显式写出所有可能的组合，比如
['text-red', 'text-green', 'text-blue']，UnoCSS会扫描到并生成对应规则 - 用
@apply配合--at-apply变量：--at-apply: 'text-${color}'，需启用transformer-directives - 加
safelist正则匹配：在uno.config.ts里配置safelist: [/^text-/, /^bg-/]，强制保留匹配的规则
为什么PurgeCSS也漏、但Unocss能绕过部分问题
PurgeCSS纯靠文本扫描，连v-bind:class里的字符串都懒得解析；Unocss虽然也依赖静态分析，但它能通过AST识别JS表达式中的字符串字面量——前提是这些字符串不是完全运行时拼接的。真正动态的部分（比如用户输入决定颜色），仍必须靠safelist兜底。
最易被忽略的是：safelist正则必须覆盖所有可能前缀，且要放在content路径之后生效；另外，transformer-directives必须在uno.config.ts中正确注册，否则--at-apply会被当成普通CSS变量忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
