@apply 仅在满足四条件时才应使用：同一工具类组合复用≥3次、语义清晰、无响应式/状态修饰符、全静态值；须配合@layer components声明，状态和响应式类必须保留在html中。
别急着用 @apply —— 它不是“把 HTML 里一堆 class 搬进 CSS 就叫重构”，而是有明确门槛的样式抽象动作。用错地方，反而让调试变难、IDE 失效、覆盖逻辑失控。
什么时候该用 @apply？看这四个硬条件
满足全部才值得提：同一组工具类在项目中真实出现 ≥3 次；这组类名表达一个语义清晰的 UI 单元（比如 btn-primary，不是 flex items-center p-2 这种泛布局组合）；不带任何响应式前缀（如 md:px-4）或状态修饰符（如 hover:bg-blue-700）；所有值都是静态的（不能含 bg-[${color}] 这类运行时变量）。
- 反例：
@apply flex justify-between p-3 md:p-4 hover:bg-gray-50—— 混了响应式和状态，JIT 编译器无法按需生成对应规则，实际可能漏掉md:p-4或hover:bg-gray-50 - 正例：
@apply px-4 py-2 bg-blue-600 text-white rounded font-medium transition-colors—— 全静态、语义统一、已在 5 个按钮上复用
@apply 必须配合 @layer components 使用
直接写 .btn { @apply ... } 是危险的：它会落在 utilities 层，可能被后面写的 mt-4 或 text-lg 覆盖。正确姿势是归入 components 层，确保优先级高于 utility 类。
@layer components {
.btn-primary {
@apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg bg-blue-600 text-white transition-colors;
}
}
-
@layer components声明后，Tailwind 会把这类自定义类插入到 CSS 输出的固定位置，避免被后续 utility 类意外覆盖 - 不要给
.btn-primary加!important—— 层机制已保证顺序，加了反而破坏可维护性 -
@apply只能引用已存在的 utility 类（如px-4），不能嵌套其他自定义类（@apply btn-primary会报错）
HTML 中保留状态和响应式修饰符
@apply 抽出来的类只是“基底”，hover、focus、md:、lg: 这些必须留在 HTML 里。否则 JIT 不会生成对应 CSS，页面交互就失效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
✅ 正确：<button class="btn-primary hover:bg-blue-700 md:px-6">提交</button>
❌ 错误：<button class="btn-primary">提交</button>（且 .btn-primary 里写了 @apply hover:bg-blue-700）
- JIT 模式只扫描 HTML 中实际出现的类名来生成 CSS，
@apply内部的hover:不会被识别 - 哪怕你写了
@apply hover:bg-blue-700，构建后也不会输出.btn-primary:hover规则 - 响应式断点同理：
md:px-6必须显式出现在 class 列表里
替代方案比 @apply 更轻量、更安全
当你犹豫“这算不算组件”时，先试试这些：
- 用
data-属性 + CSS 自定义属性驱动变化，比如<button data-variant="outline"></button>配合[data-variant="outline"] { --border-color: #e5e7eb; }，HTML 仍保持语义，CSS 也易 grep - 用 React/Vue 组件封装，把 class 组合逻辑收进组件内部，比全局 CSS 类更可控
- 直接写工具类 —— 如果某组 class 只出现 1–2 次，忍住不抽。改一个
p-3到p-4，改 HTML 一行就行，不用翻 CSS 文件再改所有调用点
真正容易被忽略的是：@apply 生成的类没有作用域，它和你在 HTML 里写的 class 完全等价，优先级、覆盖逻辑一模一样。一旦变成“全局胶水”，改一处就牵动多处，而 VS Code 的 Tailwind IntelliSense 对 @apply 内部的类名不提供补全或跳转支持 —— 写错了只能肉眼排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
