@layer base 样式不生效的根本原因是位置错误：必须紧接在 @tailwind base 之后，且不能被注释或 @import 打断；否则会被 tailwind 硬编码的重置规则覆盖。
@layer base 只有在正确顺序下才生效，写错位置等于没写。
为什么你的 @layer base 样式不生效？
根本不是语法或类名问题，而是 CSS 层叠顺序被 Tailwind 编译机制锁死了。Tailwind 把 @tailwind base 输出的重置规则（比如 * { box-sizing: border-box }）硬编码在最前面；如果你把 @layer base 写在它前面，你的样式就会被后面插入的通用规则覆盖——浏览器开发者工具里能看到它们被划掉。
-
@tailwind base必须是整个 CSS 文件中第一个 Tailwind 指令 -
@layer base必须紧接其后，不能隔行、不能被注释或@import打断 - 同一文件里多次出现
@tailwind base会报错，只允许一次 - 如果用了
@import 'tailwindcss/base.css'（如 Vite + CSS-in-JS 场景），要确认该文件真实加载且非空，否则@layer base无处可附着
@layer base 里该用 @apply 还是直接写 CSS？
优先用 @apply，但得知道它能做什么、不能做什么。
-
@apply text-3xl font-bold安全：复用主题配置，自动兼容dark:、响应式断点（如md:text-4xl） - 手写
font-size: 1.875rem危险：绕过设计系统，换主题时要全局搜改 -
theme()函数只在@layer块内有效，比如@apply text-[theme(colors.primary.DEFAULT)] - 不能链式写伪类：
@apply hover:bg-blue-500 focus:ring-2❌，必须拆成独立选择器
覆盖插件样式（比如 @tailwindcss/forms）要注意什么？
插件注入的样式默认也走 @layer components 或 @layer base，但选择器往往不够具体，直接写 input 很可能被压。
- 用更具体的选择器，比如
input[type="text"]或.form-input - 避免用通配符或低权重选择器（如
input）去对抗插件的input:focus - 示例：想统一所有
textarea的圆角和 focus 边框，得这么写：
@layer base {
textarea {
@apply rounded-lg border border-gray-300;
}
textarea:focus {
@apply border-yellow-500 ring-0;
}
}
别写 border: 1px solid #eab308——这脱离主题系统，未来维护成本翻倍。
调试时怎么确认 @layer base 真正起作用了？
打开浏览器开发者工具的 Styles 面板，看目标元素上最终生效的样式来自哪一行。关键线索有两个：
- 所有 Tailwind 工具类都带
data-tailwind="true"属性（开发模式下） - 你写的
@layer base会生成一个独立的<style></style>块，标签为data-layer="base" - 如果看到你的样式出现在
data-layer="base"下，但又被划掉，大概率是选择器权重不够，或者被更靠后的@tailwind base规则覆盖了
真正容易被忽略的，是 @layer base 不是“写了就生效”，而是“写了+位置对+选择器够狠”三者缺一不可。很多人卡在第二步，却花半天调选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
