使用 @apply 指令可以将重复的 tailwind css 类名提取到自定义 css 类中，从而简化 html 结构。具体做法是在 .css 文件中定义一个类，利用 @apply 引用所需的 tailwind 工具类，然后在 html 中直接使用该自定义类名即可。
如何定义包含多个工具类的自定义组件类？
在样式表中创建一个新的类选择器，通过 @apply 依次列出需要组合的 Tailwind 类名，这样就能将分散的样式逻辑集中管理。例如，可以将按钮的间距、背景色和圆角合并为一个名为 .btn-primary 的类，HTML 中只需引用这一个类名。
/* styles.css */
.btn-primary {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* index.html */
<button class="btn-primary">Click Me</button>运行上述代码后，生成的按钮将具备蓝色背景、白色文字、加粗字体以及适当的内边距和圆角。这种写法不仅减少了 HTML 标签内的类名数量，还提高了样式的可维护性，当需要调整按钮样式时，只需修改 CSS 文件中的 @apply 规则即可。
立即学习“前端免费学习笔记（深入）”；
如何处理带有变体（如悬停状态）的复杂组件？
对于需要响应式或伪类状态的组件，可以在 @apply 中直接使用带前缀的变体类，或者结合 :hover 等伪类选择器进行更精细的控制。例如，定义一个卡片组件，默认状态下有阴影和圆角，悬停时增加阴影深度并轻微上浮。
/* components.css */
.card {
@apply bg-white shadow-md rounded-lg p-6 transition-all duration-300;
}
.card:hover {
@apply shadow-xl -translate-y-1;
}应用该组件后，鼠标悬停在卡片上时会触发平滑的过渡动画，阴影加深且位置微升。这种方式允许开发者在不编写大量重复 CSS 属性的前提下，复用 Tailwind 强大的设计系统，同时保持 HTML 的简洁性。需要注意的是，@apply 会在构建时展开为具体的 CSS 属性，因此不会带来运行时性能开销。
在 @apply 中使用任意值语法需要注意什么？
当需要在 @apply 中引入非标准 Tailwind 配置的值时，可以使用方括号语法 [value]。例如，设置一个自定义颜色或尺寸，可以直接在 @apply 中写入 bg-[#ff0000]。这种做法虽然灵活，但会破坏主题的一致性，建议仅在必要时使用，并尽量将其封装在自定义类内部，避免在 HTML 中直接暴露复杂的样式逻辑。
