@apply 仅在类名完全一致且复用≥3次、代表稳定ui单元、无响应式/状态修饰符、短期不重构、配合@layer components使用时才适用，否则易引发调试难、样式丢失等问题。
直接用 @apply 压缩类名列表，不是不行，但多数人一上手就踩坑——它不解决语义混乱，反而让样式更难定位、更难改。
什么时候该用 @apply，而不是直接写工具类
只在满足全部以下条件时才提取：
- 同一组类名（字面量完全一致）已在项目中真实复用 ≥ 3 次，不是“将来可能复用”
- 这组类名代表一个稳定、无歧义的 UI 单元，比如
form-input或card-sm，而不是临时拼的mt-4 pl-6 flex-wrap - 不含响应式前缀（如
md:px-6）、状态修饰符（如hover:bg-blue-700）或运行时变量（如bg-[${color}]） - 你确认这个样式组合短期内不会被重构——改一处
@apply，所有地方都得回归验证
@apply 必须配合 @layer components 使用
否则 JIT 编译器可能漏生成 CSS，尤其在生产构建中被 PurgeCSS 清掉。错误现象是：开发时样式正常，上线后类名失效。
- 必须在主 CSS 入口文件（如
src/styles.css）里用@layer components { }包裹 - 不能写在
@layer utilities或普通style标签里，否则报错或不可预测 - 每个自定义类只能
@applyTailwind 原生工具类，不能嵌套其他自定义类（@apply form-input会报[@apply] is not a valid utility class name）
常见翻车点：你以为在封装，其实是在埋雷
这些写法看着省事，实际让调试成本翻倍：
-
@apply跨行书写：PostCSS 会忽略换行后的部分，导致样式缺失 - 混用自定义类：
@apply p-4 rounded-lg my-shadow中的my-shadow不会被 PurgeCSS 识别，大概率被删 - 依赖嵌套：
.card-header { @apply p-4 font-bold; }→.card { @apply p-6 bg-white; }，改card-header会影响所有card的 padding 逻辑 - 在 JSX 里仍要手动加响应式类：
class="btn-primary md:flex"，但btn-primary本身没声明md:flex，结果断点失效
比 @apply 更靠谱的替代路径
当类名变长是因为逻辑复杂（多状态、多尺寸、多主题），而不是单纯重复，@apply 就不是解法了。
- 用
clsx或cn在组件层做条件合并：className={clsx("p-4 rounded-lg", isDisabled && "opacity-50 cursor-not-allowed")} - 封装 React 组件，把变体收口到 props：
<button variant="outline" size="sm"></button>，HTML 里不再暴露任何工具类 - 引入
tailwind-variants（tv），它支持类型推导、插槽和变体组合，且不破坏 JIT 编译效率
真正难维护的不是类名长度，而是样式决策分散在 HTML、JS、CSS 三处。盯住这个根因，比纠结要不要 @apply 更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
