根本原因是@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硬塞进去”的——后者永远逃不开全量输出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
