How to use @Apply from tailwind in plain CSS?

在纯 CSS 文件中使用 Tailwind CSS 的 @apply 指令是一种非常强大的功能，它允许我们在 CSS 类中复用 Tailwind 的实用工具类。这能极大地提高样式代码的整洁性和可维护性。下面我将详细解释如何使用 @apply 指令，并给出一个具体的例子。

使用 @apply 指令的步骤

1. 安装和配置 Tailwind CSS： 首先需要确保你的项目中已正确安装和配置了 Tailwind CSS。这通常包括安装 Tailwind CSS npm 包，创建配置文件，以及在项目的构建过程中包含 Tailwind CSS。
2. 创建 CSS 文件： 在你的项目中创建一个 CSS 文件，比如 styles.css。这将是你使用 @apply 指令的地方。
3. 引入 Tailwind 指令： 在 CSS 文件的顶部，你需要引入 Tailwind 的实用工具类，可以通过 @tailwind utilities; 指令来实现。
4. 使用 @apply 指令： 在你的 CSS 中，可以选择一个选择器，然后在其内部使用 @apply 指令来引入需要的 Tailwind 类。@apply 使你能够将 Tailwind 的实用工具类应用到任何自定义 CSS 类中。

具体例子

假设我们想设计一个按钮，这个按钮有蓝色背景、白色文字和一些内边距。在 Tailwind 中，我们可以这样使用 @apply：

css
@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
    @apply bg-blue-500 text-white p-4 rounded-lg;
}

在这个例子中，.btn 类使用了 @apply 指令来应用以下 Tailwind 类：

• bg-blue-500：设置背景颜色为蓝色。
• text-white：设置文字颜色为白色。
• p-4：设置所有内边距为 1rem（根据默认配置）。
• rounded-lg：设置边角为圆角。

结论

使用 @apply 指令可以让您在 CSS 中轻松地复用 Tailwind 的实用工具类，从而保持样式的一致性，同时使得 CSS 更加简洁和易于维护。这种方法特别适合用于定制组件的样式，同时保持使用 Tailwind 实用工具类的灵活性和效率。