@layer 暴露并放大了原有项目中级联顺序和权重管理混乱问题：它重构层叠规则，使显式声明的 layer 优先级高于未命名层，导致旧样式被压制；正确做法是显式声明同名或更高序 layer 来对齐层级。
不是升级导致冲突，而是 CSS3 新特性（尤其是 @layer）暴露并放大了原有项目中长期存在的级联顺序和权重管理混乱问题。
为什么 @layer 一启用，旧样式就“失效”了
CSS3 的 @layer 不是简单加了个语法糖，它重构了层叠顺序的底层规则：普通样式表（包括你原来写的 .btn）默认落在未命名层，而显式声明的 @layer framework 层优先级低于内联样式、但高于未命名层——这意味着，只要第三方库用了 @layer framework，它的 .ant-btn 就天然压制你没包进任何 layer 的旧 CSS。
- 旧项目里靠“后引入覆盖前引入”的方式，在
@layer面前完全失效：layer 内部的顺序才决定覆盖关系，外部样式再靠后也插不进去 - 开发者工具里看到你的规则被划掉，来源显示为
layer: framework，而不是某个 CSS 文件名——这是最直接的信号 - 哪怕你把自定义 CSS 放在
<link>最末尾，只要没显式加入同名或更高序层，依然被压
@layer 下重置第三方样式的正确写法
不能靠堆选择器或加 !important 硬刚，得用 layer 本身的机制对齐层级。
- 必须显式声明一个同名或更高序的 layer：
@layer framework { .ant-btn { background: var(--primary); } }—— 这样才能进入同一竞争池 - 若想完全接管，推荐新建专属 layer 并确保它在
@layer framework之后声明：@layer my-reset { ... }，因为后声明的 layer 覆盖先声明的同名规则 - 不要试图在未命名层里写
.ant-btn，它权重再高也赢不了 layer 规则；也不要给 layer 套嵌套：@layer framework { @layer reset { ... } }是非法语法
Tailwind 用户特别注意 preflight 和 layer 的双重干扰
Tailwind 的 @tailwind base 在 v3.4+ 默认已用 @layer base 包裹，而很多 UI 库（如 Element Plus）的 dist CSS 仍为传统写法——这造成 layer 与非 layer 样式混战，preflight 重置项（如 img { display: block; }）会意外破坏依赖原生行为的组件。
立即学习“前端免费学习笔记（深入）”；
- 关掉 preflight 是刚需：
corePlugins: { preflight: false }，否则 layer 内的 base 规则永远压着你 - 关完必须重启开发服务器，HMR 不会刷新 layer 编译结果
- 如果你同时启用了
prefix: 'tw-'，别忘了所有自定义重置也要带前缀：.tw-ant-btn，否则 twMerge 不识别，也不参与 layer 竞争
真正难处理的不是语法，而是 layer 引入后，你不能再依赖“谁在后面谁赢”这种线性直觉——必须显式声明层名、控制声明顺序、并确保所有参与竞争的规则都在同一 layer 体系内。漏掉任意一环，样式就会静默失效，且开发者工具里看不出明显报错。
