tailwind官方推荐减少使用@apply，因为它会破坏原子性优势，导致类不可拆解、purgecss误删、响应式/状态修饰符需显式写出，且仅在postcss处理的@layer components块内生效。
直接用 @layer components + @apply 就是最优雅、最可控的方式，不需要额外库，也不破坏Tailwind的原子化逻辑。
为什么不用 @apply 在任意 CSS 文件里写？
很多人把 @apply 放在普通 CSS 规则块里（比如 .btn { @apply ... }），结果发现样式没生效、被覆盖、或响应式断点失效。根本原因是：@apply 只在 Tailwind 的构建流程中被识别和展开，且必须配合正确的层顺序。
-
@layer components必须出现在@tailwind base之后、@tailwind utilities之前，否则类不会被生成 - 不能在
@layer utilities或@layer base里定义组件类——它们会被忽略或打乱优先级 - 命名必须加前缀（如
.card-default），否则容易和未来新增的原生 utility class 冲突
怎么写一个带响应式和状态的按钮组件？
别手动拼 md:px-6 lg:px-8 hover:bg-blue-600 focus:ring-2 这种长串——@apply 支持直接嵌套变体，但得按规则来：
@layer components {
.btn-primary {
@apply px-4 py-2 rounded-lg font-medium text-white bg-blue-500
hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed
md:px-6 lg:px-8;
}
}
- 所有变体（
hover:、disabled:、md:）都支持，但必须写在同一行@apply中 - 不能写成多行
@apply，否则后一次会覆盖前一次 - 浏览器开发者工具里看到的是展开后的 utility class，不是原始名字——这是预期行为，不是 bug
什么时候该换 tailwind-merge 或 tailwind-variants？
当你开始在 JSX/TSX 中动态拼 class，比如 className={`${base} ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}`，就该停手了——这已经脱离了 @layer components 的适用场景。
-
tailwind-merge解决的是「运行时类名冲突」：比如同时传入text-red-500和text-blue-500，它能自动保留后者 -
tailwind-variants适合需要多维组合的组件（如variant="outline"+size="sm"+color="green"），但它引入了运行时函数调用，不适合纯静态组件 - 如果只是几个固定形态的按钮/卡片，
@layer components足够；一旦出现超过 3 个可正交组合的参数，就该切到tv了
真正容易被忽略的点是：组件语义不等于样式抽象。一个 .btn-primary 类名背后，应该隐含「可点击、有焦点反馈、禁用态不可交互」的行为契约。这个契约靠 HTML 结构（<button></button>）、disabled 属性、以及配套的 JS 状态控制来兑现，而不是靠 CSS 类本身保证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
