Tailwind CSS 重用样式

当你使用 Tailwind CSS 构建项目时，你可能会发现自己反复使用相同的工具类组合来创建特定的 UI 元素，例如按钮或卡片。虽然直接在 HTML 中写工具类是 Tailwind 的核心理念，但在某些情况下，提取和重用这些样式组合可以提高代码的可维护性。

主要方式：创建组件

这是 Tailwind 官方最推荐的方式。

与其在 CSS 中创建 .btn 这样的类，不如创建一个可复用的组件（例如，在 Vue 或 React 中）。这个组件封装了所有相关的 HTML 结构和 Tailwind 工具类。

示例 (Vue 3):

<!-- components/AppButton.vue -->
<template>
  <button
    class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
  >
    <slot></slot>
  </button>
</template>

然后，你可以在应用的任何地方复用这个按钮组件：

<AppButton>Click me</AppButton>
<AppButton>Submit</AppButton>

优点：

• 真正的可复用性：你不仅复用了样式，还复用了 HTML 结构、JavaScript 行为和可访问性属性。
• 没有增加 CSS 体积：因为你仍然是直接使用工具类，所以最终生成的 CSS 文件不会变大。
• 维护性高：当需要修改按钮样式时，你只需要在一个地方（组件文件）进行修改。

备选方式：使用 @apply

如果你没有使用支持组件的框架，或者只是想为一些简单的、重复的模式创建 CSS 类，你可以使用 @apply 指令。

@apply 允许你在自定义的 CSS 类中“内联”一系列 Tailwind 工具类。

示例：

在你的主 CSS 文件中（例如 src/style.css）：

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-blue-500 hover:bg-blue-700;
  }
}

然后你可以在 HTML 中使用这个新创建的类：

<button class="btn-primary">Click me</button>

注意事项和缺点：

• 谨慎使用：过度使用 @apply 会让你回到传统 CSS 的老路，可能会导致 CSS 文件膨胀和样式冲突。Tailwind 的作者建议优先使用组件化的方式。
• 可维护性：当一个 .btn-primary 类被到处使用时，修改它可能会产生意想不到的副作用，这正是 Tailwind 试图解决的问题。
• 仅用于叶子节点：最好只对那些“终极”的、不会再被其他类覆盖的元素（如按钮、表单元素）使用 @apply。

结论：优先考虑通过创建组件来重用样式。只有在无法或不适合创建组件的少数情况下，才考虑使用 @apply 作为备选方案。