Windi CSS的attributify模式本质是将类名映射为HTML属性，需严格遵循前缀规则（如bg、text、p）、不自动移除class属性、共存时按扫描顺序决定CSS优先级，混用会破坏语义一致性。
Windi CSS 的 attributify 模式不是“开个开关就能少写类名”那么简单——它本质是把类名映射成 HTML 属性，但属性名和值的匹配规则、优先级、与原生类名共存时的行为，稍不注意就会导致样式不生效或覆盖错乱。
启用 attributify 后为什么 class 还在？
Windi 默认不会自动移除原始 class 属性。即使你写了 bg-red-500 作为属性，Windi 仍会保留原有 class="..." 并生成对应样式，除非显式配置清理行为。
- 确认
windi.config.ts中启用了attributifyPreset，且放在plugins数组里（不是仅 import） -
attributify默认只处理带连字符的属性（如bg-red-500），不处理class本身；它不会自动删掉你写的class属性 - 若想让 Windi 完全接管并忽略原始
class，需配合插件如@windicss/plugin-removestyle或手动用transform处理 AST（不推荐初学者）
如何正确书写 attributify 属性？
属性名不是自由发挥，必须严格遵循 Windi 内置的“属性前缀 + 类名片段”规则，比如 bg 对应背景色，text 对应文字颜色，p 对应 padding —— 但这些前缀不能拼错，也不能嵌套使用。
- 合法写法：
bg-red-500、text-lg、p-4、flex、items-center - 非法写法：
background-red-500（不是background，是bg）、text-size-lg（不能加size）、p-x-4（px才是合法缩写） - 复合值如
border="2 solid gray-300"是支持的，但引号内必须是空格分隔的完整类名片段，不能混用border-2和border-solid拆开写
attributify 和 class 共存时谁赢？
当同一元素同时有 class="text-blue-500" 和 text-red-500 属性时，Windi 会按“生成 CSS 的顺序”决定最终样式，而这个顺序取决于你在配置中定义的 content 扫描顺序和插件加载顺序，不是 DOM 里写的先后。
立即学习“前端免费学习笔记（深入）”；
- Windi 把所有匹配到的类名（无论来自
class还是 attributify 属性）统一收集后去重、排序、生成 CSS，所以没有“属性覆盖 class”的天然优先级 - 若两个规则生成相同 CSS 属性（如都设
color），后扫描到的规则生成的 CSS 会排在后面，可能被前面的同权重规则覆盖 - 调试建议：打开
optimization: { safelist: true }，再检查生成的style.css文件，看对应选择器的实际顺序
真正省代码的关键不在“多写几个属性”，而在于统一命名习惯 + 避免混合使用 class 和 attributify。一旦项目里出现 class="flex" flex="col" 这种混用，就等于放弃了 attributify 的语义一致性，后续维护成本反而更高。
