TailwindCSS：重用样式

<https://www.tailwindcss.cn/docs/reusing-styles>

重用样式

管理重复并创建可重用的抽象。 Tailwind 鼓励实用程序优先的工作流程，其中仅使用低级实用程序类来实现设计。这是避免过早抽象和随之而来的痛点的有效方法。

但当然，随着项目的发展，您将不可避免地发现自己重复常见的实用程序组合，以在许多不同的地方重新创建相同的设计。例如，在下面的模板中，您可以看到每个头像图像的实用程序类重复了五次：

<div>
  <div class="flex items-center space-x-2 text-base">
    <h4 class="font-semibold text-slate-900">Contributors</h4>
    <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
      204
    </span>
  </div>
  <div class="mt-3 flex -space-x-2 overflow-hidden">
    <img
      class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
      src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt=""
    />
    <img
      class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
      src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt=""
    />
    <img
      class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
      src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
      alt=""
    />
    <img
      class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt=""
    />
    <img
      class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
      src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt=""
    />
  </div>
  <div class="mt-3 text-sm font-medium">
    <a href="#" class="text-blue-500">+ 198 others</a>
  </div>
</div>

使用编辑器和语言功能

很多时候，像这样的重复甚至不是一个真正的问题，因为它们都集中在一个地方，或者甚至实际上不存在，因为您正在迭代一组项目并且只编写一次标记。如果您需要重用的样式仅需要在单个文件中重用，则多光标编辑和循环是管理任何重复的最简单方法。

使用循环

提取组件和部分

除非组件是单个 HTML 元素，否则定义它所需的信息无法单独在 CSS 中捕获。对于任何复杂的东西，HTML 结构与 CSS 一样重要。

• [] 不要依赖 CSS 类来提取复杂的组件

<!-- Even with custom CSS, you still need to duplicate this HTML structure -->
<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    /* ... */
  }
  .chat-notification-logo-wrapper {
    /* ... */
  }
  .chat-notification-logo {
    /* ... */
  }
  .chat-notification-content {
    /* ... */
  }
  .chat-notification-title {
    /* ... */
  }
  .chat-notification-message {
    /* ... */
  }
</style>

即使您为像这样的组件中的不同元素创建类，每次想要使用该组件时仍然必须复制 HTML。当然，您可以在一个位置更新每个实例的字体大小，但是如果您需要将标题转换为链接怎么办？组件和模板部分比纯 CSS 抽象更好地解决了这个问题，因为组件可以封装 HTML 和样式。更改每个实例的字体大小就像使用 CSS 一样简单，但现在您也可以将所有标题转换为单个位置的链接。

• [x] 创建模板部分或 JavaScript 组件

function Notification({ imageUrl, imageAlt, title, message }) {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div className="shrink-0">
        <img className="h-12 w-12" src={imageUrl.src} alt={imageAlt}>
      </div>
      <div>
        <div className="text-xl font-medium text-black">{title}</div>
        <p className="text-slate-500">{message}</p>
      </div>
    </div>
  )
}

当您创建像这样的组件和模板部分时，没有理由使用实用程序类以外的任何内容，因为您已经拥有样式的单一真实来源。

使用@apply 提取类

如果您使用的是 ERB 或 Twig 等传统模板语言，那么与像 btn 这样的简单 CSS 类相比，为像按钮这样小的东西创建模板部分可能会让人感觉大材小用。虽然强烈建议您为更复杂的组件创建适当的模板部分，但当模板部分感觉笨重时，您可以使用 Tailwind 的 @apply 指令将重复的实用程序模式提取到自定义 CSS 类。这是使用 @apply 从现有实用程序组成 btn-primary 类的样子：

<!-- Before extracting a custom class -->
<button
  class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
>
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">Save changes</button>

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

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

避免过早抽象

无论你做什么，都不要仅仅为了让事情看起来“更干净”而使用@apply。是的，充斥着 Tailwind 类的 HTML 模板有点丑陋。在具有大量自定义 CSS 的项目中进行更改会更糟糕。

如果您开始对所有内容使用 @apply，那么您基本上只是再次编写 CSS，并抛弃了 Tailwind 为您提供的所有工作流程和可维护性优势，例如：

• 你必须一直想出类名——没有什么比为不值得命名的东西想出一个类名更能让你放慢速度或耗尽你的精力了。
• 您必须在多个文件之间跳转才能进行更改 - 这是一个比您在将所有内容共置在一起之前想象的更大的工作流程杀手。
• 更改样式更可怕 - CSS 是全局的，您确定可以更改该类中的 min-width 值而不破坏网站其他部分的某些内容吗？
• 你的 CSS 包会更大

如果你打算使用@apply，请将它用于非常小的、高度可重用的东西，比如按钮和表单控件——即使如此，只有当你不使用像 React 这样的框架时，组件将是更好的选择。