为什么在Tailwind CSS中过度使用apply指令会导致CSS文件变大

根本原因是@apply绕过PurgeCSS扫描机制，JIT无条件生成其内部所有工具类规则，而PurgeCSS仅识别HTML中class属性的字面量字符串；若content路径未覆盖所有实际使用位置，或混用自定义类、嵌套@apply，将导致重复规则全量输出，体积不减反增。

为什么@apply用多了CSS体积反而增大

根本原因不是@apply本身膨胀，而是它绕过了PurgeCSS的按需生成机制——你写多少条@apply，JIT就生成多少份重复的底层工具类规则。

@apply不触发PurgeCSS的条件扫描

当你在CSS里写@apply text-red-500 font-bold p-2;，Tailwind JIT会无条件生成.text-red-500、.font-bold、.p-2三条规则，哪怕你在HTML里一次都没用过这些原子类。而PurgeCSS只扫描class属性里的字符串，不解析@apply内部内容。

• 你写了10个@apply组合，每个含5个工具类 → 输出50条独立规则
• 但若直接在HTML中用这50个类，PurgeCSS可能只保留其中20个（其余没出现）
• 路径没配进content？那整个.btn-primary类都不会被JIT处理，但@apply里写的工具类照样全量输出

嵌套@apply或混用自定义类会放大问题

比如.btn {@apply p-2 rounded;} + .btn-primary {@apply btn bg-blue-600;}，JIT会分别生成p-2、rounded、bg-blue-600三套规则，而不是复用已有的.btn。更糟的是：

• @apply不支持嵌套另一个@apply，但有人手动复制粘贴，结果bg-blue-600在多个地方重复生成
• 混用自定义类如@apply p-2 my-custom-shadow;，my-custom-shadow不会被PurgeCSS识别，但p-2仍照常输出
• 响应式写法@apply md:flex lg:justify-between会让md:flex和lg:justify-between都强制生成，哪怕项目里只在一处用到

真正省体积的是content配置，不是@apply数量

很多人误以为“抽成@apply就能减体积”，其实只是把类名从HTML挪到CSS里，没减少任何实际规则。关键在：content是否覆盖所有真实使用类名的位置。

立即学习“前端免费学习笔记（深入）”；

• 漏配src/components/**/*.tsx？JSX里写的class="text-lg"就不会被扫描，对应规则照常输出
• 动态拼接如className={`p-2 ${isActive ? 'bg-red-500' : ''}`}必须加safelist: [/^bg-/]，否则bg-red-500直接消失
• @apply里写的hover:bg-blue-700会被生成，但如果你HTML里没写hover:前缀的类，PurgeCSS根本不知道该留不该留

真正难优化的从来不是@apply写多写少，而是搞不清哪些类名是“被代码调用”的，哪些是“被@apply硬塞进去”的——后者永远逃不开全量输出。