背景
Tailwind 是一个流行的 CSS 框架，它的特点是通过一系列预定义的类名来实现样式的设计。这种设计方式使得使用 Tailwind 变得非常方便，但是也有一些限制。比如，当我们需要定义一些自定义的类名时，会发现在 Tailwind 中并不是那么容易实现。
为了解决这个问题，Tailwind 提供了一个叫做 @apply 的标签。通过 @apply，我们可以将一些样式组合成一个类名，然后在 HTML 中使用这个类名来实现自定义样式的设计。
如何使用 @apply
使用 @apply 标签非常简单。我们只需要在 CSS 中定义一个类名，然后在需要使用这个类名的地方使用 @apply 标签即可。
比如，我们需要定义一个类名叫做 .my-btn，它的样式是一个圆角矩形，背景颜色为蓝色，字体颜色为白色，字体大小为 16px。那么，我们可以这样定义：
.my-btn {
border-radius: 4px;
background-color: blue;
color: white;
font-size: 16px;
}然后，在需要使用这个样式的地方，我们可以这样写：
<button class="my-btn @apply:hover:bg-green-600">Click me</button>
这里，我们使用了 @apply 标签来引用 .my-btn 类名，并且在后面添加了一个 Tailwind 的类名，用来定义鼠标悬停时的背景颜色。
@apply 的注意事项
虽然使用 @apply 标签非常方便，但是在使用的时候还是需要注意一些事项。
1. @apply 只能在 CSS 中使用
@apply 标签只能在 CSS 中使用，不能在 HTML 中使用。这意味着，我们需要在 CSS 中定义好所有需要使用的类名，然后在 HTML 中使用 @apply 标签来引用这些类名。
2. @apply 只能引用类名
@apply 标签只能引用类名，不能引用样式属性。比如，我们不能这样写：
.my-btn {
@apply border-radius: 4px;
}这样是错误的，因为 @apply 标签只能引用类名，不能引用样式属性。
3. @apply 可以组合多个类名
@apply 标签可以组合多个类名，来实现更复杂的样式。
比如，我们需要定义一个类名叫做 .my-card，它的样式是一个带有阴影效果的圆角矩形，背景颜色为白色，内边距为 16px。那么，我们可以这样定义：
.my-card {
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: white;
padding: 16px;
}然后，在需要使用这个样式的地方，我们可以这样写：
<div class="my-card @apply:hover:shadow-md">Card content</div>
这里，我们使用了 @apply 标签来引用 .my-card 类名，并且在后面添加了一个 Tailwind 的类名，用来定义鼠标悬停时的阴影效果。
4. @apply 可以嵌套使用
@apply 标签可以嵌套使用，来实现更复杂的样式。
比如，我们需要定义一个类名叫做 .my-form，它的样式是一个带有边框和内边距的表单。那么，我们可以这样定义：
// javascriptcn.com 代码示例
.my-form {
border: 1px solid gray;
padding: 16px;
.my-input {
border: none;
outline: none;
padding: 8px;
font-size: 16px;
}
}然后，在需要使用这个样式的地方，我们可以这样写：
<form class="my-form"> <input class="my-input" type="text" placeholder="Enter your name"> </form>
这里，我们使用了 @apply 标签来引用 .my-form 类名，并且在 .my-form 中嵌套了 .my-input 类名，来实现表单输入框的样式。
总结
通过本文的介绍，我们了解了如何在 Tailwind 中使用 @apply 标签来实现自定义的样式设计。虽然使用 @apply 标签非常方便，但是在使用的时候还是需要注意一些事项。希望本文能够对大家学习 Tailwind 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650feaba95b1f8cacd89726a