正则匹配动态 class 需在 rules 中配置带捕获组的正则（如 /^p-(\d+)$/），回调接收匹配值并返回样式对象；自定义 css 变量须在 theme.colors 等字段显式注册；shortcuts 为编译期文本替换；dynamicrule 适用于语义化状态类，依赖已注册变量。
怎么用正则匹配动态生成 class 对应的 CSS
UnoCSS 的 rules 支持正则表达式，这是批量生成样式最常用也最灵活的方式。比如要让所有 p-[0-9]+ 都转成对应像素的 padding，不能靠硬写几十条静态规则，得靠正则捕获数字再映射。
常见错误现象：写了 ['p-10', { padding: '10px' }]，结果 p-12 不生效——因为没匹配到，也没正则兜底。
-
rules数组里必须包含能覆盖目标 class 名的正则项，例如[/^p-(\d+)$/, ([, d]) => ({ padding: `${d}px` })] - 正则括号捕获的内容会作为参数传入回调函数，
[, d]中的d就是匹配到的数字字符串，记得手动转Number(d)再参与计算 - 若需支持单位（如
p-2rem），正则得扩展为/^p-(\d+)(rem|px|em)?$/，回调里判断单位分支处理 - 注意优先级：规则数组从上到下匹配，靠前的正则若误匹配了后续更具体的规则（比如
/^p-/没加结尾锚点），会导致后面规则失效
怎么注册自定义 CSS 变量让 text-[--x] 生效
text-[--color-primary] 这类写法不会自动生效——UnoCSS 不解析 :root 或任意 CSS 文件里的 --xxx 变量，它只认 uno.config.ts 里显式声明的部分。
常见错误现象：class 写对了，浏览器里查不到对应 CSS 规则，控制台也无报错，样式就是不出现。
- 必须把变量注册进
theme.colors、theme.spacing等具体子字段，例如theme: { colors: { 'primary': 'var(--color-primary)' } } - 然后才能用
text-primary；若坚持用text-[--color-primary]，就得在theme.colors里加一条'--color-primary': 'var(--color-primary)' -
theme必须是defineConfig的顶层字段，不能包在extend或presets里，否则 UnoCSS 根本读不到 - 变量名带连字符（如
--bg-card）要加引号，避免 JS 解析报错：'--bg-card': 'var(--bg-card)'
怎么用 shortcuts 组合已有原子类减少重复书写
shortcuts 是纯文本替换，不生成新 CSS，只在编译期把别名展开成原始 class 列表。适合封装高频组合，比如按钮、卡片容器等固定搭配。
使用场景：多个页面都用 flex items-center justify-between p-4 bg-white rounded-lg shadow-sm，每次敲太累，且改一处要全局搜。
- 定义方式是键值对：
{ 'card-base': 'flex items-center justify-between p-4 bg-white rounded-lg shadow-sm' } - 值里可以嵌套其他 shortcut 名，但不能含动态逻辑（比如不能拼接
bg-${color}） - 如果 shortcut 值里用了未启用的 preset 功能（如
@apply），需确认对应 preset 已安装并启用，否则编译报错Unknown rule @apply - 别名中含特殊字符（如
btn:primary）需用引号包裹键名，并配置transformRules处理冒号转义
怎么写动态规则适配业务状态（如 price-tag-flash）
当 class 名携带语义状态（如促销类型、权限等级），且不同状态对应不同样式组合时，用 DynamicRule 比写一堆静态规则更清晰、可维护。
典型例子：商品价格标签需要根据 saleType 渲染不同边框和渐变背景，且颜色来自 CSS 变量。
- 规则写法是正则 + 回调函数，回调返回一个 CSS 对象，支持
var(--color-flash)这类引用 - 务必确保该变量已在
theme.colors中注册，否则生成的 CSS 里var()无效，浏览器回退为初始值 - 回调函数里可访问完整匹配数组，例如
/^price-tag-(normal|flash|presale)$/匹配后，[, type]中的type就是字符串'flash' - 避免在回调里做异步操作或 DOM 查询——规则运行在构建阶段，无运行时环境
:root { --color-primary: #3b82f6; }，又要在 uno.config.ts 的 theme.colors 里注册同名 key。少一步，text-[--color-primary] 就只是个没意义的字符串。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
