在使用 Tailwind CSS 开发时，我们非常享受直接在 HTML 中编写类名的爽快感。但在复杂项目中可能会遇到这样一个场景：某个组件（比如一个主按钮）在项目中会重复使用几十次。
对于这样的相同样式的组件，如果每次都得复制粘贴十几段类名，此时代码就会变得臃肿且难以维护。为了解决这个问题，Tailwind CSS 为我们提供了一个非常优雅的 “@apply” 指令。
Tailwind CSS @apply 指令
在 Tailwind CSS 中，@apply 是一个核心指令，它用于将多个 “Tailwind 类名” 合并到一个自定义的 CSS 类名中，以方便复用该组类名。
语法：
.自定义类名 {
@apply 类名1 类名2 ...;
}说明：
在 @apply 后面，类名与类名之间使用空格隔开，类似 class 属性中多个类名的写法。
@apply 指令支持绝大多数 Tailwind 类名，包括颜色、尺寸、甚至是 “hover:” 这种带有状态前缀的类名。
Tailwind CSS @apply 示例
接下来，我们通过一个简单的例子来讲解一下 Tailwind CSS 中 @apply 指令是如何使用的。
示例 1：提取公共按钮样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/* 提取主按钮样式 */
.btn-primary {
@apply px-6 py-2 bg-green-500 text-white font-bold rounded hover:bg-green-700 transition-colors cursor-pointer;
}
/* 提取危险按钮样式 */
.btn-danger {
@apply px-6 py-2 bg-red-400 text-white font-bold rounded hover:bg-red-500 transition-colors cursor-pointer;
}
</style>
</head>
<body class="p-10 flex gap-4">
<button class="btn-primary">提交</button>
<button class="btn-danger">删除</button>
</body>
</html>页面效果如下图所示。
分析：
我们在 <style type="text/tailwindcss"> 中使用 @apply 指令，来将两个非常长的类名串分别打包成了 .btn-primary 和 .btn-danger。这样在 HTML 中调用时，代码就会变得非常简洁。
如果不使用 @apply 进行提取，我们在 HTML 里写这两个按钮时，每个 button 标签的 class 都得使用长达十几个单词，代码会变得非常臃肿。
注意: 在使用 @apply 指令时，我们必须把 style 标签的 type 属性值设置为 "text/tailwindcss"，否则 @apply 指令不会生效。
Tailwind CSS @apply 与原生 CSS 混用
在 Tailwind CSS 中，@apply 的强大之处不仅体现在提取类名，还体现在能和原生的 CSS 属性完美地 “混写” 在同一个类名中。
示例 2：混用原生 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.custom-card {
/* 1. 先引入 Tailwind 类名 */
@apply p-6 bg-white rounded-lg shadow-md;
/* 2. 再写 Tailwind 难以表示的特殊原生 CSS */
box-shadow: 10px 10px 0px 0px rgba(25, 182, 148, 0.2);
}
</style>
</head>
<body class="p-10 bg-gray-100">
<div class="custom-card w-64">
<h3 class="text-lg font-bold text-gray-800">绿叶网</h3>
<p class="text-gray-500 mt-2 text-sm">绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
在 .custom-card {} 中，我们首先使用 @apply 指令定义了内边距、背景色、圆角等 Tailwind 类名。然后紧接着在下面使用原生 CSS 的 box-shadow 属性定义了绿叶网的品牌色。
最后，Tailwind 会在编译时自动将它们合并到一起来生成最终样式。
常见问题
1. 既然 @apply 那么方便，我是不是可以把所有的 Tailwind 类名都用 @apply 提取到 CSS 中呢？
强烈建议不要这样去做！如果我们把页面上绝大多数的样式都通过 @apply 抽离回了 CSS 文件中，其实是使用传统 CSS 的旧思维来写 Tailwind CSS，这在官方指南中被称为 “滥用 @apply”。
这样不仅没有享受到 Tailwind CSS 的优势，比如 “所见即所得”、“无需在 HTML 和 CSS 文件之间来回切换”，反而让维护成本变得更高了。
在实际项目开发中，小伙伴们应该记住一个准则：只有当某个小的 UI 组件（如主按钮、表单输入框、特殊图标）在全站高频重复出现，且样式稳定时，才考虑使用 @apply 提取。而对于其他的布局、间距、内容卡片等，我们依然推荐优先直接在 HTML 中编写。
2. 如果我想使用 @apply 提取的类名强制覆盖别人的样式，应该怎么做呢？
如果希望打包的这些类名具有最高的优先级（强制覆盖原有的 CSS），我们只需要在 @apply 语句的末尾、分号的前面，加上一个 “!important” 标记即可。
