什么时候不该用 @apply
多数人一上手就滥用 @apply，结果调试时发现样式突然消失、响应式断点不生效、hover 状态没反应——根本不是 Tailwind 有问题，而是 @apply 被用在了它根本不该出现的地方。
以下情况直接放弃 @apply：
- 类名里含
md:、dark:、hover:、group-hover:等变体前缀：这些不会被自动包裹进媒体查询或伪类规则，编译后只是普通声明，等于白写 - 想封装一个“按钮组件”并写
.btn { @apply px-4 py-2 bg-blue-500 rounded hover:bg-blue-600; }：hover 部分会被忽略，上线后悬停无变化 - 在
.scss文件里写@apply：PostCSS 插件压根不处理 SCSS 语法，报Unknown word是必然的 - 只用过 1–2 次、或未来可能动态改 padding/颜色的组合：提前提取反而锁死灵活性，改一处要全局回归验证
@apply 必须配 @layer components
开发时样式正常、上线后类名失效？大概率是漏了 @layer components 包裹。Tailwind 的 JIT 引擎依赖这个显式声明来识别哪些 CSS 规则需要保留，否则 PurgeCSS 会把它当“未使用代码”删掉。
正确写法只有一种：
@layer components {
.form-input {
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}
}
错误写法包括：
- 写在
@layer utilities里 → 报错或不可预测 - 写在普通
style标签或内联<style></style>中 → 不参与 JIT 编译 - 分散在多个 CSS 文件中，没统一入口导入 → 部分规则丢失
能安全用 @apply 的三类场景
不是不能用，是得卡准条件。满足全部以下条件才考虑：
- 同一组工具类（字面量完全一致）已在项目中真实复用 ≥ 3 次，不是“我觉得以后会用”
- 不含任何变体、响应式前缀、运行时变量（比如
bg-[${color}]）、JSX 动态拼接 - 代表稳定 UI 单元，例如
text-hint（@apply text-gray-500 text-sm leading-relaxed），而不是临时拼的mt-6 pl-8 flex-wrap
典型安全示例：
@layer components {
.sr-only {
@apply absolute w-px h-px p-0 m-0 overflow-hidden clip border-0;
}
.visually-hidden {
@apply absolute inset-0 w-0 h-0 p-0 m-0 overflow-hidden;
}
}
比 @apply 更靠谱的替代路径
当类名变长是因为逻辑复杂（多状态、多尺寸、主题切换），而不是单纯重复，@apply 就不是解法。更可持续的做法是：
- 用
theme.extend定义语义化 token，比如colors.primary，再在 JSX 中直接用bg-primary-500 - 把组件结构拆成原子层：卡片用
card+card-header+card-body类名，但每个类只负责单一职责，不塞满二十个工具类 - 通过
data-属性驱动状态，比如<button data-state="loading"></button>，配合data-[state=loading]:opacity-70原生变体支持
真正难的从来不是写多少类名，而是判断哪些抽象值得固化、哪些该保持开放。一旦开始为“省事”而提前封装，往往就是维护成本翻倍的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
