@layer components 必须写在 @tailwind components 之后，否则自定义组件样式会被覆盖；覆盖插件样式需用更具体选择器；@apply 不能跨层引用；第三方库样式异常常因 preflight 重置，应关闭并手动补全基础样式。
@layer components 必须写在 @tailwind components 之后
很多人试图覆盖 .btn 或 .card 这类组件样式，结果发现加了 CSS 也没反应。根本不是选择器写错，而是 @layer components 块的位置错了——它必须出现在 @tailwind components 指令之后，否则 Tailwind 自带的组件规则会把它盖掉。
常见错误是把自定义组件样式写在 @tailwind components 前面，或者混在 @layer utilities 里；正确顺序只有一种：
@tailwind base@tailwind components@layer components { ... }@tailwind utilities
浏览器 DevTools 的 Styles 面板里，如果看到你写的 .btn 规则被划掉，且旁边显示来自 tailwind.css:123（带 data-tailwind="true"），基本就是加载顺序问题。
覆盖 @tailwindcss/forms 插件要加足够具体的选择器
@tailwindcss/forms 给 input、select 等元素注入了默认样式，包括 focus:ring-blue-500 和边框重置。直接写 input:focus { border-color: #8b5cf6; } 很可能不生效，因为插件用的是更具体的选择器，比如 input[type='text']:focus。
立即学习“前端免费学习笔记（深入）”；
安全做法是复制插件本身用的选择器结构，或进一步提高特异性：
- 用
[type='text']:focus, [type='email']:focus, textarea:focus而不只是input:focus - 加
!important是下策；优先用@layer base+ 更具体选择器 - 如果用了
prefix（如tw-），注意插件生成的类名也会被加前缀，但它的基础标签样式（如input { }）不受影响
@apply 在 @layer components 中可用，但不能跨层引用
在 @layer components 里用 @apply 是安全的，比如 .btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded; }。但它有个硬限制：只能引用已启用、且在同一层或更早层定义的工具类。
容易踩的坑：
- 在
@layer components里@apply hover:bg-red-500→ 如果hover:变体没启用，编译报错 - 在
@layer components里@apply text-brand→ 如果text-brand是你在@layer utilities里定义的，它还没被注入，不生效 - 在
@layer base里@apply md:text-xl→ 响应式变体在base层不可用，必须写成font-size: 1.25rem
第三方 UI 库按钮被“清空”？先关 preflight 再接管
Element Plus 的 .el-button 变透明、Naive UI 的输入框没边框，大概率不是类名冲突，而是 Tailwind 的 @layer base（即 preflight）直接重置了 button、input 标签样式。这类规则不依赖类名，所以加前缀、改 class 顺序都没用。
真正有效的解法是两步走：
- 在
tailwind.config.js中设preflight: false，关掉默认重置 - 立刻在
@layer base中手动补全你需要的基础样式，比如button { background-color: initial; }或input { border: 1px solid #d1d5db; } - 不要全局开
important: true；若必须保兼容，用important: '#app'锁定作用域
最常被忽略的一点：关了 preflight 后，* { box-sizing: border-box } 也没了，得自己补上，否则所有布局都会偏移。
