@layer base必须紧接@tailwind base之后，否则自定义基础样式（如h1、textarea）会被tailwind重置规则覆盖而静默失效；正确顺序为@tailwind base→@layer base→@tailwind components→@layer components→@tailwind utilities→@layer utilities。
@layer base必须紧接@tailwind base之后，否则失效
自定义基础样式（比如 h1、textarea）写在 @layer base 里却没生效？大概率是顺序错了。@tailwind base 必须是 CSS 文件中第一个 Tailwind 指令，@layer base 必须紧随其后。如果调换位置，Tailwind 插入的重置规则（如 * { box-sizing: border-box }）会覆盖你的样式。
常见错误包括：
- 把
@layer base写在@tailwind components后面 - 在同一个文件里多次出现
@tailwind base - 用
@import 'tailwindcss/base.css'却没确认它是否真被加载（尤其 Vite + CSS-in-JS 场景）
正确结构只有一种：
@tailwind base;
@layer base {
h1 { @apply text-3xl font-bold; }
}
@tailwind components;
@layer components {
.btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded; }
}
@tailwind utilities;
@layer utilities {
.text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
}
@layer utilities必须放在@tailwind utilities之前
Tailwind 默认把所有工具类注入到 @layer utilities，而你手写的裸 CSS 规则（比如 .title { color: #1e40af; }）默认落在未声明层级，会被 @layer utilities 压制——不是因为写得晚，而是层序更低。
要让自定义工具类生效，必须显式放进同级或更高优先级的 @layer，且顺序不能错：
-
@layer utilities块必须出现在@tailwind utilities之前 - 想覆盖插件样式（如
@tailwindcss/forms），选择器要足够具体（比如input[type="text"]而非单纯input） - 不要在
@layer utilities外直接写@apply调用未定义的工具类，会报Cannot use @apply with unknown utility
@layer components不支持&:hover嵌套语法
在 @layer components 里写伪类，不能用 SCSS 风格的嵌套：
.btn-primary {
@apply bg-blue-500;
&:hover { @apply bg-blue-600; } /* ❌ 无效 */
}
必须拆成独立规则，靠层内顺序控制优先级：
@layer components {
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded;
}
.btn-primary:hover {
@apply bg-blue-600;
}
.btn-primary:focus {
@apply ring-2 ring-blue-400 ring-offset-2;
}
}
注意：@apply 在 @layer 块内可用，但不支持链式变体（如 @apply hover:bg-blue-500 focus:ring-2），必须拆开。
@import layer()必须写在独立CSS文件最顶部
想把第三方库（如 Ant Design、Element Plus）样式收编进你的层体系，唯一可靠方式是用 @import "lib.css" layer(framework)。但它有硬性限制：
- 不能写在 HTML 的
<style></style>块里——浏览器会静默忽略layer()参数，等效于普通导入 - 必须放在独立 CSS 文件（如
layers.css）的最顶部，前面不能有任何内容（包括空行、注释、其他@import） - 构建工具（如 Vite）需启用
postcss-cascade-layers插件，否则整行被删除且无提示 - 你的覆盖规则必须写在更靠后的
@layer（如@layer custom），且层声明顺序必须在@import layer(framework)之后
层名区分大小写，引号只用于路径，layer(framework) 合法，layer("framework") 或 layer( framework ) 会失败。
真正容易被忽略的是：层内规则仍受选择器特异性约束。哪怕你把第三方样式放进 layer(framework)，@layer custom { .ant-btn } 也不一定赢过 @layer framework { #app .ant-btn--primary }——这时候还得加 ID 或属性选择器，@layer 解决的是“层间压制”，不是“层内权重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
