根本原因是原子类特异性（0-0-1-0）低于scoped样式带data-v-xxx的选择器（0-0-1-1），导致被覆盖；解法包括改UnoCSS的enforce为'pre'、启用mode: 'vue-scoped'对齐权重，或用@layer分层控制应用顺序。
原子类和业务类并存时样式不生效，根本原因不是“写错了”，而是特异性（specificity）被压——业务类如 .card__header 权重是 0-0-1-0，而第三方组件或 scoped 样式里带 data-v-xxx 的规则是 0-0-1-1，原子类直接输在起跑线。
为什么 px-4 这类原子类总被 scoped 样式覆盖
Vue / Nuxt 的 <style scoped> 会自动给选择器加上属性匹配，比如生成 .btn[data-v-abc123]，特异性变成 0-0-1-1；而 UnoCSS 或 Tailwind 默认生成的 px-4 对应规则只是 .px-4（0-0-1-0）。浏览器按位比权重，第三位都是 1，第四位 1 > 0，后者必败。
- 不要改业务类加
!important—— 它会让后续所有覆盖都陷入“谁更狠”循环 - 检查 DevTools 的 Styles 面板：被划掉的原子类旁会显示
specificity is lower than another rule，点开看具体值 - 若用 UnoCSS，把
enforce: 'post'改成enforce: 'pre'，让原子样式注入到<head>更靠前位置（但仅对非 scoped 场景有效） - 更稳的解法是启用
mode: 'vue-scoped'，UnoCSS 会主动为原子类加上相同的data-v-xxx属性，权重自然对齐
如何让原子类和 BEM 类在同一个元素上和平共处
混用 card__title font-bold text-lg 看似方便，实则埋雷：font-bold 和 card__title 职责重叠，团队无法判断哪部分该进组件逻辑、哪部分算临时补丁。
- 根元素（block）禁用原子类：
<div class="product-card">—— 只允许 BEM 类 - 叶子节点可组合：
<h3 class="product-card__title tw-font-bold tw-text-lg">，前提是启用了prefix: 'tw-' - 高频组合要收口：比如
tw-bg-blue-600 tw-text-white tw-rounded出现三次以上，就该封装成product-card__title--highlight - 避免 modifier 上叠原子类：
button--disabled opacity-50是反模式；应把opacity-50和cursor-not-allowed写进button--disabled的 CSS 块里
@layer 是目前最干净的层级治理手段
CSS 原生 @layer 让你不用拼特异性，靠声明顺序定胜负。UnoCSS 支持通过 layers 配置项自动包裹生成的原子类，无需手写 @layer utilities。
立即学习“前端免费学习笔记（深入）”；
- 在
uno.config.ts中定义：layers: ['reset', 'base', 'tokens', 'components', 'utilities'] - 自定义按钮变体写进
components层，原子类自动归入utilities层 —— 即使选择器权重相同，components也会后应用、更高优 - 注意兼容性：Safari 15.4+、Chrome 99+ 才支持完整
@layer；旧版需 fallback，比如只对[data-layer="components"]加!important（仅限该环境） - 别手动用
@layer utilities { .px-4 { ... } }—— UnoCSS 会自动处理，手写容易漏、错、重复
真正难的不是让样式生效，而是让下一个人一眼看懂这个 text-sm 是设计规范的一部分，还是某次紧急上线随手加的补丁。前缀、分层、作用域，都是在给语义留路标，而不是给浏览器加权重。
