unocss 的 css 注入顺序必须手动控制，需将 import 'virtual:uno.css' 置于所有其他 css 导入之前，确保其生成的样式在 html 中最先加载，避免被 reset/base 或组件样式覆盖；同时应关闭重复 preflight、提升关键原子类 specificity，并合理使用 safelist 应对动态样式场景。
UnoCSS 的 CSS 注入顺序必须手动控制
UnoCSS 生成的 virtual:uno.css 默认会以 <link> 形式插入到 HTML 末尾，这几乎必然导致它被项目中已有的 reset、base 或组件样式覆盖。不是 UnoCSS 生成的规则有问题，而是层叠顺序错了——浏览器按 <link> 出现顺序决定优先级，后加载的 CSS 才能覆盖前者的同名属性。
确保 virtual:uno.css 在所有自定义样式之前加载
最直接有效的做法是显式调整 import 顺序，让 UnoCSS 的 CSS 成为第一个生效的样式层：
- 在入口 JS（如
main.ts）中，把import 'virtual:uno.css'放在所有其他 CSS import 之前，包括reset.css、variables.css、app.css等 - 如果项目用了 Vite 的
css.preprocessorOptions或build.rollupOptions.output.manualChunks，检查最终 HTML 中<link>标签的实际顺序，而非源码中的 import 顺序 - 避免在任何 CSS 文件里用
@import引入virtual:uno.css，它不会被识别，且会破坏加载时机
对 reset/base 层做兼容性适配
UnoCSS 的原子类（如 mt-4、text-center）本质是“强声明”，但若 reset.css 用了 * { margin: 0 } 或 div { display: block } 这类通配符规则，仍可能干扰某些组合行为。此时不能靠加 !important，而应：
- 确认使用的 preset（如
presetUno()）是否启用了preflight：默认开启，它会注入一套与 Tailwind 兼容的 reset 规则；若你已有自己的 reset，建议关闭它：presets: [presetUno({ preflight: false })] - 若必须保留旧 reset，可在
uno.config.ts中通过rules手动提升关键原子类的 specificity，例如：['mt-4', { 'margin-top': '1rem' }, { layer: 'utilities' }]，配合 Vite 的css.devInlineLimit控制内联阈值 - 不要依赖
!important注入，UnoCSS 不支持全局!important开关，强行加会导致 HMR 失效或构建异常
动态样式场景下需额外拦截
当项目存在运行时动态插入样式（如第三方 UI 库、主题切换脚本、document.head.appendChild 创建的 <style></style>），它们会天然晚于 virtual:uno.css 加载，从而覆盖原子类。这类问题无法靠配置解决，只能：
- 检查第三方库文档，看是否提供 “disable default styles” 选项（如 Ant Design 的
css-in-js模式） - 用
transformerDirectives或自定义 extractor，在 JS 字符串中提前提取出可能被覆盖的类名，并确保它们出现在 UnoCSS 的 safelist 中 - 对关键原子类（如
hidden、flex、absolute）加入safelist，防止因动态生成未被扫描而漏提
实际生效的关键点往往不在规则写得多全，而在于 virtual:uno.css 是否真正在所有样式层之首加载——哪怕只错开一个 <link>，就可能让 text-red-500 被某个 .btn { color: #333 } 静默覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
