@apply并非被反对，而是被严格限定使用场景；它会破坏Tailwind原子性优势，导致类不可拆解、PurgeCSS误删、响应式/状态修饰符需显式写出，且仅在PostCSS处理的@layer块内生效。
@apply 不是被“反对”，而是被严格限定使用场景——官方不推荐随意用，是因为它在多数情况下会把问题从 HTML 层转移到 CSS 层，且不可逆。
为什么 @apply 会破坏 Tailwind 的原子性优势
Atomic CSS 的核心价值在于：每个类名只干一件事、可自由组合、可按需生成、可被 PurgeCSS 精准删除。一旦用 @apply 把 px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 封装成 .btn-primary，就等于放弃这些能力：
- 这个新类名不再可拆解——你不能单独覆盖其中某个属性，比如只改
hover:bg-blue-800而不动其他 - PurgeCSS 无法识别
.btn-primary对应哪些工具类，除非你确保它的定义文件被content配置扫描到，否则生产构建可能直接删掉整个样式 - 响应式前缀（如
md:px-6）和状态修饰符（如hover:、focus:）在@apply中必须显式写出，不能靠 JIT 动态推导；漏写一个，就少一种断点或交互态
@apply 在构建期的硬限制经常被忽略
@apply 是 PostCSS 插件功能，不是 CSS 标准语法。它只在被 Tailwind 的 PostCSS 流程处理的文件中生效，且有几条不容妥协的规则：
- 必须单行书写：
@apply px-4 py-2 rounded;可以，换行或用\拆分就会被 PostCSS 忽略 - 只能引用已注册的 utility 类：
@apply text-red-500合法，但@apply my-custom-shadow（自定义类）会被 PurgeCSS 当作无效代码删掉 - 不能嵌套：
.card {@apply p-6;}合法，但.card-header {@apply p-4;}→.card {@apply @apply p-6;}会报错Cannot resolve @apply for - 必须出现在
@layer块内（如@layer components），否则可能被 utilities 层覆盖，导致样式失效
真正该用 @apply 的信号极少
官方说“重复 ≥3 次”只是表象，关键判断条件是这四个同时成立：
立即学习“前端免费学习笔记（深入）”；
- 同一组工具类字面量完全一致地出现在至少三个地方（不是“类似”，是复制粘贴出来的相同字符串）
- 不含任何动态部分：
bg-${color}-500或className={isSmall ? 'p-2' : 'p-4'}这种都不能进@apply - 代表稳定 UI 单元：
.card-sm可以，.section-with-margin-top-12不行——后者语义模糊、易重构 - 该 CSS 文件路径已被
content配置纳入扫描范围，否则 JIT 编译器根本不会生成对应 CSS
多数项目里，类名变长不是因为重复太多，而是因为逻辑复杂（多状态、多断点、多条件）。这时候强行用 @apply 只会让样式决策更隐蔽、更难定位——你得在 HTML、JSX、CSS 三处来回跳转才能搞清一个按钮最终长什么样。
