UnoCSS升级后CSS顺序乱了，本质是v0.57→v0.60+排序逻辑变更：变体权重按实际处理器数量动态计算，基础权重因preset更新重校准，导致如md:text-lg text-sm等类名覆盖失效；需通过变体组、priority配置或enforce/injectAt调整针对性修复。
UnoCSS升级后CSS顺序乱了，本质是排序逻辑变了
UnoCSS 从 v0.57 升级到 v0.60+ 后，sortRules 函数内部的权重计算方式调整了：变体权重（variantRank）现在基于实际注册的变体处理器数量动态计算，而非固定偏移；同时基础规则的 token[0][0] 值也因 preset 更新而重新校准。结果就是，原来 md:text-lg text-sm 能覆盖的写法，升级后可能失效——不是 bug，是排序模型更精确了。
快速验证是否真由排序引起
别急着改配置，先确认问题根源：
- 在控制台运行
document.querySelector('your-target').className，复制类名字符串 - 用
uno.generate(...)手动触发生成：import { createGenerator } from 'unocss'
const uno = await createGenerator()
console.log(await uno.generate('md:text-lg text-sm')) - 对比输出中两条规则的
layer和sort字段值：数值小的排前面，会被后面覆盖 - 若
text-sm的sort值反而比md:text-lg小，说明它被提前注入，覆盖失败
三类稳妥修复方式，按优先级推荐
不建议全局降级或禁用排序，而是针对性干预：
-
优先用变体组语法：把冲突类合并为单个 token，消除排序竞争
class="text-(sm md:lg hover:red)"→ UnoCSS 视为一个规则，内部自动按变体权重展开，不再拆成多个独立类比顺序 -
显式提升关键类优先级：在
uno.config.ts的rules中补一条高权重要求['text-sm', { 'font-size': '0.875rem' }, { priority: 999 }]（注意：仅对字面量类名生效，不匹配text-[14px]） -
锁定注入时机与位置：避免被其他样式覆盖，改
enforce和injectAt
设enforce: 'pre'确保 UnoCSS 在组件库 CSS 之前注入
加injectAt: 'first'强制插入开头，而非默认末尾
最容易被忽略的兼容点
升级后 preflights 默认启用更激进的重置策略，margin/padding 的基础层（@layer base）现在排在所有原子类之前。如果你依赖 mt-4 覆盖预设的 margin-top: 0，得确认该预设没被 @layer base 里的新 reset 规则压住——查浏览器开发者工具里对应元素的 computed styles，看 margin-top 来源是否真的来自 mt-4 这条规则，而不是被 base 层的 * { margin: 0 } 先截断了。
立即学习“前端免费学习笔记（深入）”；
