unocss属性模式需显式启用presetattributify，否则bg="red-500"等写法被忽略；必须在uno.config.ts中注册该预设，并建议配attributifyoptions.prefixed='un-'避免vue绑定冲突。
属性模式需要显式启用 presetAttributify
UnoCSS 默认不开启属性模式，只识别 class 写法。必须在 uno.config.ts 中引入并注册 presetAttributify()，否则像 bg="red-500" 这类写法会被完全忽略。
常见错误是只装了包、配了插件，但忘了加 preset —— 此时 HTML 里写属性毫无效果，控制台也无报错，容易误以为语法不支持。
- 正确配置示例：
import { defineConfig, presetUno, presetAttributify } from 'unocss'<br>export default defineConfig({<br> presets: [<br> presetUno(),<br> presetAttributify(), // 必须有这一行<br> ],<br>}) - 若同时用 Vue，建议加
attributifyOptions: { prefixed: 'un-' }避免和原生属性冲突（如防止text="center"被 Vue 解析为响应式绑定） - 微信小程序或 UniApp 项目中，
presetAttributify是默认推荐模式，但依然要手动 import 并加入 presets 数组
属性值语法不是自由字符串，需符合预设规则
属性模式不是“任意字符串转 CSS”，它依赖 presetAttributify 内置的解析逻辑。比如 text="sm red-500" 可以生效，但 text="14px #ef4444" 默认不行 —— 后者需要额外配置 rules 或启用 presetUno 的 color/size 扩展支持。
-
bg="blue-500"→ 有效（presetUno提供颜色映射） -
grid="~ cols-3 gap-4"→ 有效（presetUno支持 grid DSL） -
border="2 solid gray-300"→ 有效（前提是presetUno已启用且 gray-300 在 color palette 中） -
font-size="16px"→ 无效（原生属性名不被解析；应改用text="base"或自定义 rule）
Vue 模板中属性模式易与响应式绑定冲突
Vue 会把 text="sm center" 当作静态 attribute，但若写成 :text="sm center" 或 v-bind:text="..."，就会触发 JS 表达式求值，导致解析失败或运行时错误。
- 正确写法：直接使用
text="sm center"（非绑定语法） - 在 SFC 的
<template></template>中，避免和v-指令混用同一属性名（如不要同时写v-if和bg=""在同一个元素上，某些构建器可能提前编译） - 若用
un-前缀（如un-bg="red-500"），可彻底规避冲突，但需同步调整 IDE 插件配置才能获得补全提示 - Vite + Vue 项目中，若发现属性未生成样式，先检查是否启用了
vue: { reactivityTransform: true }—— 此时需在属性前加冒号转义：text:="sm/red"
IDE 支持不默认开启，补全和悬停需额外配置
VS Code 不认识 bg="" 这类属性，光标悬停看不到生成的 CSS，输入时也无提示 —— 这不是 UnoCSS 本身的问题，而是语言服务没接入。
- 必须安装官方扩展
UnoCSS（而非仅 Tailwind 插件） - 在
.vscode/settings.json中确保启用了字符串内提示："editor.quickSuggestions": { "strings": true } - 若用
un-前缀，还需在uno.config.ts中配置attributifyOptions.prefixed: 'un-'，否则插件无法匹配 - 没有插件支持时，调试唯一办法是查看生成的
virtual:uno.css文件，搜索对应属性值确认是否被解析
flex="~ col gap-2" 这类写法不熟悉，排查样式来源反而比看 class 更费时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
