根本解决办法是禁用 presetuno 的 preflight：在 uno.config.ts 中配置 presets: [presetuno({ preflight: false })]，避免其与组件库的重置规则冲突；同时调整 enforce 为 'pre' 或启用 mode: 'vue-scoped' 以匹配 scoped 样式权重。
UnoCSS 的 presetUno 会覆盖组件库的默认样式
因为 presetUno() 自带一套完整的 Preflight 重置规则，它和 Tailwind、Antd、Element Plus 等组件库内置的重置逻辑重复甚至冲突。比如 @unocss/reset/tailwind.css 会把所有 button 的 background-color 设为 transparent，而 Antd 或 shadcn-nuxt 的按钮依赖非透明背景才能正常显示。
- 默认启用
presetUno()就等于同时加载了一套现代浏览器重置（基于 modern-normalize），它不区分上下文，全局生效 - shadcn-nuxt、Antd、Element Plus 等都自带自己的基础样式重置或默认主题，它们假设浏览器默认样式已被合理处理，但不会假设你又塞进来第二套
- 如果你没显式禁用或替换重置文件，
presetUno的preflight层会和组件库的base层在相同选择器上打架，最终谁后注入、谁权重高，谁就赢——但结果往往不可控
类名生成规则不一致导致视觉错位
即使类名看起来一样，比如 text-blue-500，presetUno 和 @nuxtjs/tailwindcss（或 Antd 的 CSS-in-JS）对它的解析可能不同：前者可能生成 color: #3b82f6，后者可能走 CSS 变量（color: var(--color-blue-500)），或者加了 !important，或者用了不同的色阶映射。这种“同名不同义”在组合使用时直接表现为颜色、间距、圆角等细微但明显的偏差。
-
presetUno默认不读取tailwind.config.ts中的theme.extend.colors，除非你手动用theme配置桥接 - shadcn-nuxt 组件内部 class 是静态写死的（如
class="bg-primary text-primary-foreground"），这些 token 名依赖 Tailwind 的 theme 配置；而 UnoCSS 若未同步该配置，bg-primary就压根不会生成样式 - 动态拼接类名（如
class="text-${status}-500"）在 UnoCSS 中默认无法推导，但组件库可能大量使用这类模式，导致部分样式漏生成
注入时机与 scoped 样式权重天然不匹配
UnoCSS 默认以 enforce: 'post' 插入 <style></style> 标签，而 Vue 的 scoped 样式会带上 data-v-xxx 属性选择器，特异性为 0-0-1-1；UnoCSS 原子类是普通类选择器，特异性只有 0-0-1-0。哪怕你在模板里写了 px-4，只要组件内部有 .my-btn[data-v-abc] { padding: 1rem }，它就会赢。
- 这不是 bug，是设计使然：UnoCSS 不预设你用 Vue，更不预设你用 scoped
- 解决不是靠
!important，而是改enforce: 'pre'或启用mode: 'vue-scoped'，让 UnoCSS 主动适配 scoped 的权重模型 - 若项目中还混用了 PostCSS 插件（如
postcss-nested），且执行顺序在 UnoCSS 之前，可能导致 class 被提前编译或丢失，进一步加剧不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
