属性化模式本身不精简类名，仅将class拆为HTML属性；真正精简依赖预设规则与缩写能力，如mt="4"、pos="relative"，且必须显式启用presetAttributify并配合presetUno等核心预设。
属性化模式（attributify）本身不精简类名，它只是把 class 拆成 HTML 属性——真正精简靠的是规则预设和缩写能力。 直接写 m-2 或 text-red-500 并不会变短，但写 mt-4 → mt="4"、pos-relative → pos="relative" 这类转换，才是精简的关键路径。
attributify 模式必须显式启用且不能孤立使用
UnoCSS 默认不开启 attributify；只装 @unocss/preset-attributify 也不行，必须注册进 uno.config.ts 的 presets 数组里：
import { defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetAttributify(), // 必须放这里
presetUno() // 同时需要基础规则支持，否则 m="4" 无法识别
]
})
- 漏掉
presetUno或preset-wind等核心预设，m="4"就是无效属性，浏览器无反应也不报错 - 若用了
preset-tailwind，别再加preset-wind，规则冲突会导致部分属性被覆盖或忽略 - Vite 项目中，确保
main.ts或入口文件有import 'virtual:uno.css'
属性值缩写依赖预设内置规则，不是所有写法都支持
像 w="1/2"、h="screen"、pos="relative" 能生效，是因为 preset-mini 或 preset-wind 里已定义了对应正则匹配规则。但以下写法会失败：
-
mt="1.5rem"→ 不识别单位，得写mt="6"（按 theme.spacing[6] 映射）或用mt="[1.5rem]" -
bg="red-500"→ 必须有颜色预设（preset-wind或preset-uno），纯preset-attributify不带颜色规则 -
hover:bg="red-500"→ 需要@unocss/transformer-variant-group，否则整个属性被跳过
查规则源码最直接：去 node_modules/@unocss/presets/dist/preset-mini/index.mjs 看 position、size 等模块的正则数组，就知道哪些缩写被支持。
动态值和自定义缩写必须靠 rules 或 shortcuts 补充
attributify 模式下，原生不支持 text="[#ff6b6b]" 或 rounded="[50%]" 这类自由值，需手动扩展：
- 用
rules加正则：比如支持fs="14px"→font-size: 14px - 用
shortcuts封装高频组合：btn="px-4 py-2 rounded bg-blue-500 text-white"，然后写btn属性即可 - 注意
shortcuts生成的是完整 CSS 规则，滥用会增大 CSS 体积，尤其含主题变量时
常见坑：在 shortcuts 里写 flex-center="flex items-center justify-center"，然后期望 flex-center hover:bg-gray-100 生效——不行，hover: 变体必须由 transformer 处理，而 shortcut 是静态字符串替换。
最容易被忽略的是：attributify 的「精简」感，其实来自你主动放弃 class 属性包裹 + 依赖预设提供的语义缩写。一旦脱离 preset-wind 或 preset-mini，m="4" 和 class="m-4" 在字节数上并无差别，甚至更长（多出等号和引号）。真要压缩体积，得靠按需生成和预设裁剪，而不是换种写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
