@apply本身不膨胀体积，但它绕过purgecss的content扫描机制，使jit无条件生成所有内部工具类规则，导致重复输出、体积反增；关键在content必须覆盖所有含@apply的文件路径。
直接说结论：@apply 本身不膨胀体积，但它会让 Tailwind JIT 绕过 content 扫描，无条件生成所有内部工具类规则——你写多少条 @apply，就输出多少份重复的底层 CSS，最终体积反而更大。
为什么 @apply 会绕过 PurgeCSS / JIT 的按需生成？
@apply 是在 CSS 文件里写的，而 Tailwind 的 JIT 引擎只通过 content 配置扫描 HTML、JSX、TSX 等模板中的 class 字符串来决定“哪些工具类真正被用到了”。它不会解析 @apply 里的内容，所以：
-
.btn-primary { @apply text-red-500 p-4 hover:bg-gray-100; }→ JIT 会强制生成.text-red-500、.p-4、.hover\:bg-gray-100三条完整规则，哪怕你在整个项目里一次都没在 HTML 中写过text-red-500 - 如果多个自定义类都
@apply了p-4，那.p-4规则就会被重复输出多次，压缩也去不掉（选择器不同，无法合并） -
content路径没配对（比如漏了./src/styles/**/*.css），JIT 根本不会处理这些@apply所在的文件，但里面引用的工具类仍照常全量生成
嵌套 @apply 或混用自定义类会放大问题
Tailwind 不支持 @apply 嵌套另一个 @apply，但有人手动复制粘贴或间接复用，结果就是规则爆炸：
-
.btn { @apply px-3 py-1 rounded; }+.btn-sm { @apply btn text-xs; }→ JIT 分别生成px-3/py-1/rounded和text-xs，不会复用已有的.btn对应的规则 -
.card { @apply p-4 my-shadow; }中my-shadow是你自己写的类，PurgeCSS 完全不认识，但p-4还是会被无条件输出 - 响应式写法如
@apply md:flex lg:justify-between会让md:flex和lg:justify-between都强制生成，哪怕项目中只在一处用到，且没有对应 HTML 触发
开发环境体积大 ≠ 真实问题，但生产构建必须验证
开发时看到 2MB+ 的 CSS 是正常现象：JIT 在 dev 模式下默认不读 content，也不裁剪，只为热更新快。真正要盯的是生产构建输出：
- 运行
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 用
grep -o "text-lg" ./dist/output.css | wc -l对比源码中实际使用次数，若远高于源码出现频次，说明content没生效 - 检查
tailwind.config.js的content字段是否包含所有含@apply的 CSS 文件路径，例如./src/styles/**/*.css
最易被忽略的一点：抽 @apply 不是为了“让 HTML 更干净”，而是为了语义复用；但一旦抽了，就必须把对应 CSS 文件加进 content，否则 JIT 就当它不存在——而里面的工具类却还在疯狂输出。这不是配置遗漏，是机制使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
