过度使用 @apply 不是“写法错误”，而是会让 Tailwind 失去它最核心的工程优势——原子性、可预测性和按需生成能力。你写的每个 @apply 都在悄悄绕过 PurgeCSS 和 JIT 编译器的控制逻辑。
为什么 @apply 会破坏原子性，让样式更难改
原子类的价值在于“可拆、可换、可删”。一旦你把 px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 封装成 .btn-primary，就等于锁死了这组组合：
- 你不能只覆盖其中一项（比如只调
hover:bg-blue-800），必须重写整个@apply或加更高优先级规则 - 组件使用者无法通过传入
class="btn-primary p-6"来临时加大内边距——p-6会被px-4 py-2覆盖，除非你提前预留!p-6 - 调试时得在 HTML、JSX、CSS 三处跳转：看到
btn-primary→ 找定义 → 看是否漏了md:px-6→ 再回模板补断点
为什么 CSS 文件反而变大了
@apply 不触发 PurgeCSS 的扫描机制。它只认 HTML 中 class 属性里的字面量字符串，不解析 CSS 文件里 @apply 后面写了啥：
- 你在 5 个地方写了
@apply text-red-500 font-bold p-2→ JIT 生成 15 条独立规则，哪怕 HTML 里一次都没用过text-red-500 - 如果
content配置没覆盖到该 CSS 文件路径，整个.btn-primary类可能被 PurgeCSS 删掉，但里面所有工具类仍照常输出 - 嵌套
@apply（比如.btn {@apply p-2;}+.btn-primary {@apply btn bg-blue-600;}）会导致p-2重复生成两份
为什么响应式和状态修饰符容易失效
@apply 不做变体展开。它只是把字符串原样复制进 CSS 声明块，不会自动包裹媒体查询或伪类：
-
@apply md:flex lg:justify-between编译后只是普通声明，没有@media (min-width: 768px)包裹，响应式直接失效 -
@apply hover:bg-blue-700 focus:ring-2在非交互状态下也会生效，因为没绑定到:hover或:focus上 - 像
dark:hover:bg-gray-800这种复合变体，@apply会静默忽略或报错，根本不会生成对应规则
真正该用 @apply 的边界在哪
不是“用了就错”，而是它只适合极窄的场景——且必须同时满足：
- 同一串工具类（字面量完全一致）已在至少三个真实使用位置出现，不是“将来可能复用”
- 不含任何动态部分：
bg-${color}-500、className={isSmall ? 'p-2' : 'p-4'}都不行 - 无响应式前缀、无伪类、无变体：
font-sans leading-normal tracking-tight可以，md:p-4 hover:bg-gray-100不行 - 定义文件路径已明确加入
content配置，否则生产构建中大概率样式丢失
多数人卡在“以为自己在封装组件”，其实是在把样式决策从显式、分散、可组合的状态，变成隐式、集中、不可拆解的状态——而 Tailwind 的设计哲学恰恰是反其道而行之。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
