@tailwind base 必须写在 @layer base 之前，否则自定义基础样式会被覆盖；@layer base 中应优先使用 @apply 复用主题配置，并确保选择器足够具体以覆盖插件样式。
@layer base 必须写在 @tailwind base 之后
很多人以为只要写了 @layer base 就能覆盖基础样式，结果发现自定义的 h1 字体或 input 边框没生效。根本原因是：Tailwind 编译后，@tailwind base 输出的实际 CSS 规则（比如 * { box-sizing: border-box }）必须先存在，@layer base 的内容才会被追加在其后——否则你的样式可能被更早声明的通用规则压制。
常见错误写法：
@layer base {
h1 { @apply text-3xl font-bold; }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
正确顺序是：
@tailwind base;
@layer base {
h1 { @apply text-3xl font-bold; }
}
@tailwind components;
@tailwind utilities;
-
@tailwind base必须是 CSS 文件中第一个 Tailwind 指令 -
@layer base可以出现多次，但所有块都会合并并追加到原生 base 输出之后 - 如果用了
@import 'tailwindcss/base.css'（如某些 Vite + CSS-in-JS 场景），@layer base依然有效，但要确认该base.css确实被加载且非空
用 @apply 还是直接写 CSS？优先 @apply，但注意 theme() 函数支持
@apply 在 @layer base 中完全可用，而且比手写 font-size: 1.875rem 更安全——它复用 Tailwind 主题配置，自动适配响应式断点和 dark mode 变体（如果启用了）。不过要注意：theme() 函数只在 @layer 块内解析，不能在普通 CSS 规则里用。
例如，想让所有 textarea 默认有圆角和 focus 边框颜色：
@layer base {
textarea {
@apply rounded-lg border border-gray-300;
}
textarea:focus {
@apply border-yellow-500 ring-0;
}
}
- 避免直接写
border: 1px solid #eab308，这样会绕过主题系统，未来换色要全局搜改 - 如果需要动态取值（比如品牌主色），用
theme('colors.primary.DEFAULT')，前提是已在tailwind.config.js的theme.extend.colors中定义了primary -
@apply不支持伪类链式调用（如@apply hover:bg-blue-500 focus:ring-2），得拆成独立规则
覆盖 @tailwindcss/forms 插件时，选择器必须足够具体
装了 @tailwindcss/forms 后，它会给 input、select 等加一堆默认样式，包括 focus:ring-blue-500。你用 @layer base 覆盖时，如果只写 input:focus，很可能被插件生成的更具体选择器（如 input[type='text']:focus）打败。
官方推荐写法是复制插件内部使用的完整选择器列表，再覆盖关键属性：
@layer base {
[type='text']:focus,
[type='email']:focus,
[type='password']:focus,
textarea:focus,
select:focus {
--tw-ring-color: theme('colors.green.500');
border-color: var(--tw-ring-color);
}
}
- 别漏掉
input:where(:not([type])):focus—— 它匹配没写type的input，比如某些 CMS 生成的 HTML - 如果想移除焦点环（ring）但保留边框，显式写
box-shadow: none，因为插件默认同时设了ring和border - 单选/复选框要用
[type='radio']:focus和[type='checkbox']:focus单独处理，它们的渲染机制和文本输入框不同
@layer base 不会自动压缩未使用的样式
这是容易被忽略的一点：@layer base 里的规则，不管是否在 HTML 中实际用到，都会原样输出到最终 CSS 中。Tailwind 的 tree-shaking 只作用于 @tailwind utilities 层的工具类，对 @layer 写的 CSS 不起效。
比如你写了：
@layer base {
.unused-class { @apply text-red-500; }
h1 { @apply text-3xl; }
}
-
.unused-class会被打包进生产 CSS，哪怕页面里一个都没用 - 而
h1是 HTML 原生标签，肯定会被用到，所以没问题 - 如果你只是临时调试想加个 class，别放
@layer base，改用@layer components或直接写在组件 scoped style 里
真正需要长期维护的基础级样式（如标题层级、表单默认外观、全局字体堆栈），才适合放进 @layer base —— 放进去就等于承诺“这些是项目基石”，删之前得全盘检查影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
