UnoCSS属性模式是通过style属性直接书写UnoCSS语法（如color: red500）实现样式控制，需显式启用presetAttributify并配置attributify: true；而默认模式依赖HTML中class属性组合原子类（如text-red-500 flex），无需额外配置且调试更直观。
UnoCSS属性模式是什么，它和默认模式有什么区别
UnoCSS默认使用原子类（atomic classes），比如 text-red-500、flex items-center；而属性模式（attribute mode）允许你把样式直接写在元素的 style 属性里，但用的是 UnoCSS 的语法，比如 style="color: red500; display: flex; align-items: center;" —— 它不是原生 CSS 值，而是 UnoCSS 解析器识别的 shorthand 表达式。
关键点在于：它不生成额外 class，也不依赖 HTML class 列表，而是靠运行时或构建时解析 style 属性内容，转换成真实 CSS 规则并注入。适合动态样式、组件内联控制、或不想污染 class 名称空间的场景。
注意：属性模式默认是关闭的，必须显式启用，且只对 style 属性生效（不是任意自定义属性）。
如何启用 UnoCSS 的属性模式
在 UnoCSS 配置中（通常是 uno.config.ts 或 uno.config.js），需要添加 attributifyPreset 并配置 attributify 选项：
立即学习“前端免费学习笔记（深入）”；
import { defineConfig, presetAttributify } from 'unocss'
<p>export default defineConfig({
presets: [
presetAttributify({ /<em> 可选配置 </em>/ }),
],
// ⚠️ 必须开启 attributify 模式
theme: {
extend: {
attributify: true,
},
},
})常见遗漏点：
- 只加
presetAttributify但没设attributify: true→ 不生效 - 用了
style但值写成原生 CSS（如style="color: #ef4444;"）→ UnoCSS 不处理，无效果 - 在 SSR 环境中未配置预编译或运行时解析器 → 构建后丢失样式
属性模式下怎么写合法的简短样式
语法是 property: value，其中 value 是 UnoCSS 支持的 token，不是 CSS 字面量。例如：
-
color: red500✅（等价于text-red-500） -
bg: blue400✅（等价于bg-blue-400） -
font-weight: bold✅（等价于font-bold） -
border: 1px solid gray300✅（支持复合值，空格分隔） -
grid-cols: 2✅（等价于grid-cols-2） -
padding: x4 y2✅（支持方向缩写，x/y/z）
不能写的：
-
color: #f00❌（非 token，不会被解析） -
margin: 1rem❌（数值单位未注册时无法推导） -
display: flex items-center❌（多个独立规则要拆成多组property: value）
为什么有时属性模式不生效或报错
最常遇到的几个原因：
-
style属性被框架（如 Vue / React）自动转义或移除 → 检查是否用了v-html或dangerouslySetInnerHTML，应改用绑定对象方式（如 Vue 的:style="{ color: 'red500' }"不行，得用style="color: red500"字符串） - 未在
uno.config.ts中启用preflights: false或shortcuts冲突 → 属性模式不继承 shortcuts，需确保对应 token 已在 theme 或 presets 中定义 - 开发时热更新没触发重解析 → 修改
style字符串后需手动刷新，或检查是否启用了content.preprocess适配器 - 构建产物中缺失运行时解析器 → 若用
unocss/preset-attributify，需确保打包时包含其 runtime（尤其 Vite 插件模式下默认已含，但 Rollup 或自定义构建链可能漏）
属性模式省代码行数是真的，但代价是失去 class 名的可读性与调试便利性；一旦值写错，浏览器控制台不会报错，只是样式不出现——这点比 class 模式更难排查。
