Tailwind 是一款非常受欢迎的 CSS 框架，它提供了一套丰富的 CSS 类，可以帮助我们快速构建出漂亮的页面布局和样式。但是，在使用 Tailwind 时，我们经常会遇到需要重复书写一些相似的 CSS 样式的问题。这时候，我们就可以使用 @apply 指令来简化 CSS 的编写。
什么是 @apply 指令？
@apply 指令是一个 Sass 的特性，它可以让我们定义一些常见的 CSS 样式组合，并通过一个变量来快速引用这些组合。
例如，假设我们有一个按钮的样式：
-- -------------------- ---- -------
---- -
-------- -------------
-------- --- -----
-------------- ----
---------- -----
------------ ----
------------ --
----------- -------
------------ -------
----------------- --------
------ --------
------- --- ----- --------
-------------------- ----------------- ------------- ------
-------------------- ------
--------------------------- ----------------- -- ---- ---
------- -
----------------- --------
------------- --------
-
------- -
-------- -----
----------- - - - --- -------- ---- ---- -----
-
-这是一个非常常见的按钮样式，我们可以在项目中复制粘贴这段代码，但这样会导致代码重复和维护复杂。相反，我们可以使用 @apply 指令，将这个按钮样式抽象为一个组合，例如：
-- -------------------- ---- -------
--------- -
-------- -------------
-------- --- -----
-------------- ----
---------- -----
------------ ----
------------ --
----------- -------
------------ -------
----------------- --------
------ --------
------- --- ----- --------
-------------------- ----------------- ------------- ------
-------------------- ------
--------------------------- ----------------- -- ---- ---
------- -
----------------- --------
------------- --------
-
------- -
-------- -----
----------- - - - --- -------- ---- ---- -----
-
-
---- -
------- ----------
-我们定义了一个 Sass 占位符 %btn-base，并将按钮的样式写在占位符中。然后，我们使用 @extend 指令将 %btn-base 引用到 .btn 类中。这样，我们就可以在代码中快速使用 .btn 类，而不用再写一遍样式。
如何在 Tailwind 中使用 @apply 指令？
在 Tailwind 中，如果你想使用 @apply 指令，你需要先将原来的 CSS 样式放到 @layer utilities { } 块中。这样，你就可以使用这些样式定义新的组合。
例如，假设我们想定义一个 .btn-primary 类，它应该继承 .btn 类，并增加一个蓝色的背景颜色和白色的文字颜色：
@layer utilities {
.btn-primary {
@extend .btn;
background-color: #4299e1;
color: #fff;
}
}这样，我们就可以在代码中使用 .btn-primary 类，它会继承所有 .btn 的属性，并且增加一个蓝色的背景和白色的文字颜色。
总结
使用 @apply 指令可以简化重复的 CSS 样式的书写，让我们的代码更加模块化和易于维护。在 Tailwind 中，我们可以使用 @layer 指令将 CSS 样式组织到一个特殊的 “utilities” 层中，来定义新的样式组合。掌握好 @apply 指令，可以使我们的开发效率更高，代码质量更好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c485e283d39b48818074d6