@layer base必须紧接@tailwind base之后，否则自定义样式会被tailwind重置规则（如*{box-sizing:border-box}）覆盖而静默失效；中间不能有空行、注释或@import，且同一文件仅允许一个@tailwind base。
@layer base必须紧接@tailwind base之后，否则静默失效
你的自定义基础样式没生效，大概率不是语法写错，而是位置错了。Tailwind 编译时会把 @tailwind base 输出的重置规则（比如 * { box-sizing: border-box }、html { font-size: 16px }）硬编码在最前面。如果你把 @layer base 放在它前面，浏览器加载顺序就是「你的样式 → Tailwind 重置 → Tailwind 其他层」，结果就是你的 h1 或 textarea 样式被重置规则覆盖，开发者工具里能看到它们被划掉。
正确顺序只有一种：
-
@tailwind base必须是整个 CSS 文件中第一个 Tailwind 指令 -
@layer base必须紧接其后，中间不能有空行、注释或@import - 同一文件里多次出现
@tailwind base会报错，只允许一次 - 如果用了
@import 'tailwindcss/base.css'（如 Vite + CSS-in-JS 场景），要确认该文件真实加载且非空
@layer components里不能嵌套伪类，必须拆开写
很多人想在 @layer components 里用 &:hover 或 &:focus 嵌套写法，比如：
@layer components {
.btn-primary {
@apply bg-blue-500;
&:hover { @apply bg-blue-600; } /* ❌ 无效 */
}
}
这不会生效。@apply 不支持伪类链式调用，也不支持嵌套选择器。你得把伪类规则单独拎出来：
- 每个伪类状态必须是独立选择器，比如
.btn-primary:hover、.btn-primary:focus - 不能写
@apply hover:bg-blue-500 focus:ring-2这种复合变体——@apply只接受纯工具类组合 - 想兼容 dark 模式？得显式写
.btn-primary:hover和.dark .btn-primary:hover，或者用hover:bg-blue-600 dark:hover:bg-blue-700配合@apply
@layer utilities适合加自定义属性，但别滥用
@layer utilities 是唯一能安全写自定义 CSS 属性的地方，比如 text-shadow、backdrop-filter、aspect-ratio 等 Tailwind 默认不提供的原子能力：
@layer utilities {
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.bg-blur { backdrop-filter: blur(4px); }
}
但要注意：
- 别用它去重复定义已有工具类功能，比如写
.p-4 { padding: 1rem }——这破坏设计系统一致性 - 所有
@layer utilities规则必须放在@tailwind utilities之后，否则会被内置工具类覆盖 - 它不支持响应式前缀自动展开，
md:text-shadow-sm不会生成，得手动写媒体查询包裹
媒体查询必须嵌套在@layer块内，否则不算“进层”
直接写 @media (min-width: 768px) { .card { display: grid; } } 是无效的——这条规则默认落在未命名顶层（unlayered），天然高于你所有 @layer 块，容易引发意外交互和覆盖。
真正起效的方式是把它塞进对应层里：
- 响应式组件修复？写进
@layer components内部：@layer components { @media (min-width: 768px) { .card { display: grid; } } } - 想覆盖第三方库？用
@layer overrides并确保它声明在所有依赖层之后 - 检查是否生效：打开 DevTools → Elements → Styles 面板，看规则是否带
data-layer="components"或类似标识；没标识的，说明根本没进层
层序永远先于媒体查询生效条件。浏览器先按层决定“哪组规则参与计算”，再在该层内匹配断点——这意味着，哪怕你只写了桌面端断点，只要层序靠后，它就能压过其他层里更宽泛的响应式规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
