@apply会让CSS体积不降反增，因其绕过PurgeCSS扫描机制，JIT无条件生成内部所有工具类规则，即使HTML中未使用；混用自定义类或写响应式/状态组合时，还易导致规则丢失、重复或失效。
@apply 不是类名封装工具，而是静态复制粘贴指令；滥用它等于放弃 Tailwind 的原子性、响应式和按需生成机制。
为什么@apply会让CSS体积不降反增
它绕过 PurgeCSS 的扫描逻辑——JIT 编译器会无条件生成 @apply 内部所有工具类的完整规则，不管这些类是否在 HTML 中真实出现过。
- 写 5 个
@apply，每个含px-4、rounded、bg-blue-600→ 输出 15 条独立规则 - 但直接在 JSX 里用这 15 个类，PurgeCSS 可能只保留其中 7 个（其余未命中）
- 混用自定义类如
@apply p-4 my-shadow→my-shadow被 PurgeCSS 误删，p-4却照常输出
为什么@apply在响应式和状态组合中大概率失效
@apply 不解析媒体查询、不展开变体嵌套，只是线性拼接声明。你写的 md:flex hover:bg-gray-100 dark:hover:bg-gray-800，编译后往往只剩普通 flex 和 hover:bg-gray-100，其余被静默忽略或丢弃。
-
@apply md:p-6→ 不生成@media (min-width: 768px)包裹，只是普通p-6 -
@apply hover:bg-blue-500 dark:hover:bg-blue-900→ 后者常不生效，因dark:和hover:交叉变体需 JIT 动态注入 - 放在 Vue/Svelte 的
<style scoped></style>或 SCSS 嵌套块里 → PostCSS 根本不解析，直接报Cannot apply unknown utility class
为什么@apply会让调试和重构成本飙升
它把样式决策从 HTML 层抽离到 CSS 文件，切断了“所见即所得”的链路。点进一个 .btn-primary，看到的是一长串拼接工具类，而不是语义化行为。
立即学习“前端免费学习笔记（深入）”；
- 跨行写
@apply→ PostCSS 忽略换行后内容，样式缺失却难定位 - 嵌套依赖：
.card-header {@apply p-4;}→.card {@apply p-6;}→ 改前者会意外影响后者 padding - 类名语义漂移：同一个
.card在文章页和设置页承担不同视觉职责，但样式被锁死，后续改圆角必须动 CSS 而非 HTML
真正该警惕的不是类名长度，而是类名背后的状态逻辑分散在 HTML、JS、CSS 三处。用 clsx 做条件合并，或用 tailwind-variants 封装变体，比硬塞 @apply 更贴近 Tailwind 的设计原意——它要你控制组合，而不是隐藏组合。
