属性化模式（attributify mode）是unocss对html属性的语义重载机制，将类名如text-red-500映射为text="red-500"等属性，需配置preset-attributify、启用attributify选项并确保模板被扫描，否则属性将被忽略。
什么是属性化模式（Attributify Mode）
属性化模式不是语法糖，是 UnoCSS 对 HTML 属性的语义重载机制。它允许你把 class="text-red-500 p-4 flex" 写成 text="red-500" p="4" flex，本质是让 HTML 属性名直接映射为 CSS 工具类前缀，值则对应具体 token。
这个模式真正起作用的前提是：UnoCSS 必须能识别这些自定义属性，并在扫描阶段将它们转换为标准类名，再参与后续的按需生成流程。否则，这些属性会被当成普通 HTML 属性忽略，最终没有对应 CSS 输出。
启用 attributify 模式需要三步配置
- 在
uno.config.ts 的 presets 中加入 @unocss/preset-attributify，不能只靠插件自动推断
- 显式启用
attributify: true 选项（Vite 插件配置里或 preset 配置内），否则即使装了 preset 也不会激活
- 确保你的模板文件（如
.vue 或 .html）被 UnoCSS 扫描器覆盖；SFC 的 <template></template> 默认支持，但纯 JSX/TSX 文件需额外配置 include 路径
uno.config.ts 的 presets 中加入 @unocss/preset-attributify，不能只靠插件自动推断 attributify: true 选项（Vite 插件配置里或 preset 配置内），否则即使装了 preset 也不会激活 .vue 或 .html）被 UnoCSS 扫描器覆盖；SFC 的 <template></template> 默认支持，但纯 JSX/TSX 文件需额外配置 include 路径 示例最小配置：
import { defineConfig } from 'unocss'
import presetAttributify from '@unocss/preset-attributify'
<p>export default defineConfig({
presets: [
presetAttributify({ /<em> 可选：preflight: false </em>/ })
],
// 注意：这里也要开 attributify，部分版本要求双保险
attributify: true,
})</p>
常见属性名冲突与规避方式
text、bg、p、m 这些短属性名容易和原生 HTML 属性或 Vue 指令冲突：
- Vue 的
v-text会和text="red-500"冲突，导致编译报错或渲染异常 - 原生
input的type、name属性若被误写为type="flex"，浏览器会静默忽略，但 UnoCSS 不会生成样式 - 使用
class时加空格（如class="p-2 text-sm"）仍可共存，但混用易引发优先级混乱
推荐做法：
- 用命名空间前缀，比如
uno-text="red-500" uno-p="4"，并在 preset 配置中指定prefix: 'uno-' - 避免覆盖
style、id、class等关键属性名 - 在团队项目中统一禁用高危短名（如
h、w），改用height、width等更明确的属性
为什么 border="2 solid blue-400" 不生效
这不是 bug，是 attributify 的默认分隔规则限制：它默认只按空格切分单个属性值，且仅支持「一个属性 → 一个工具类」的映射，不解析复合值。
border="2 solid blue-400" 会被当作一个整体 token，而 UnoCSS 默认没有注册 border-2-solid-blue-400 这样的规则。
解决方法有两种：
- 改用标准原子类组合：
border="2" border-style="solid" border-color="blue-400"（前提是 preset 启用了对应属性） - 自定义规则，在
rules中用正则匹配并生成多条 CSS，例如：rules: [ [/^border-(\d+)-(\w+)-(.+)$/, ([, d, style, color]) => ({ 'border-width': `${d}px`, 'border-style': style, 'border-color': `var(--un-color-${color})` })] ]
实际项目中，这类复杂映射建议收敛到 shortcuts，比如 border="primary-2" → border-2 border-solid border-primary，更可控也更易维护。
属性化模式省键入次数不假，但它的自由度和容错率远低于 class 模式。一旦属性名设计没对齐团队习惯，或和框架指令撞车，调试成本反而更高。上线前务必跑一遍 unocss --watch 查看实际生成的 CSS 是否包含预期规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
