@apply 是打包静态工具类的语法糖，不支持变体、响应式、嵌套及跨文件引用，仅当完全满足四条件（复用≥3次、无变体、无动态变量、置于@layer components内）才可安全使用。
@apply 不是用来“抽取组件”的，它是把一串静态工具类打包成一个 CSS 类名的语法糖；真要封装可复用 UI 组件，得靠 @layer components + 原子类组合，而不是靠 @apply 拼按钮或卡片。
为什么直接 @apply 封装按钮会出问题
很多人写 .btn-primary { @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700; }，开发时看着正常，上线后发现 hover:bg-blue-700 失效——因为 @apply 不展开变体（hover:、focus:、md: 等），它只是原样复制声明，没生成对应伪类规则。
-
@apply不处理响应式断点：md:px-6写进去，编译后只是普通padding-left: 1.5rem，不会包裹在@media (min-width: 768px)里 -
@apply不支持嵌套变体：group-hover:bg-gray-800会被忽略或报错 -
@apply不能跨文件引用自定义类：@apply btn-base会报[@apply] is not a valid utility class name - 开发时样式存在，构建后消失：没用
@layer components包裹，PurgeCSS 会误删未在 HTML 中显式出现的类名
@apply 安全使用的 4 个硬性条件
只有同时满足以下全部条件，才考虑用 @apply 提取：
- 同一组类名（字面量完全一致）已在项目中真实复用 ≥ 3 次，不是“以后可能用”
- 不含任何变体前缀：
hover:、focus:、md:、dark:、group-等统统不行 - 不依赖运行时变量：
bg-[${color}]或 JS 动态拼接的类名，@apply无法识别 - 必须放在
@layer components { }块内，且该块必须位于主 CSS 入口文件（如src/styles.css）中，不能写在 Vue/React 组件的<style></style>里
正确封装按钮的替代做法
与其用 @apply 抽按钮，不如保留原子类组合，在 HTML 层控制变体和响应式逻辑：
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg
hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none
md:px-6 md:py-3">Submit</button>
再配合 theme.extend 定义语义化颜色/尺寸，比如：
module.exports = {
theme: {
extend: {
colors: { primary: '#2563eb' },
spacing: { 'btn-pad': '0.5rem' }
}
}
}
然后用 bg-primary、px-btn-pad 替代硬编码值——既保持响应式和变体可用，又避免样式散落。
最常被忽略的一点：@apply 不是抽象层，它不解决语义缺失、状态耦合或响应式断裂的问题；强行用它封装复杂组件，只会让调试变成翻源码+查 PurgeCSS 日志的组合技。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
