Tailwind CSS 提取組件

提取組件

處理復用并且保持功能優(yōu)先項目的可維護性。

Tailwind 鼓勵 功能優(yōu)先 的工作流程，最初僅使用功能類來實現設計以避免不成熟的抽象。

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

但是隨著項目的成長，您會不可避免的發(fā)現自己重復使用通用的功能類組合在許多不同的地方創(chuàng)建相同的組件。這對于類似按鈕、表單元素、徽章這樣的小組件最為明顯。

<!-- Repeating these classes for every button can be painful -->
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
  Click me
</button>

在許多組件實例之間保持一長串功能類的同步很快會成為真正的維護負擔，因此，當您開始遇到這種痛苦的復制時，提取組件是個好主意。

提取模板組件

定義一個 UI 組件的所有信息可以完全存在于 CSS 中，這非常罕見。與此同時，您也需要使用一些重要的相對應的 HTML 結構。

不要依賴 CSS 類來提取復雜的組件

<style>
  .vacation-card { /* ... */ }
  .vacation-card-info { /* ... */ }
  .vacation-card-eyebrow { /* ... */ }
  .vacation-card-title { /* ... */ }
  .vacation-card-price { /* ... */ }
</style>

<!-- Even with custom CSS, you still need to duplicate this HTML structure -->
<div class="vacation-card">
  <img class="vacation-card-image" src="..." alt="Beach in Cancun">
  <div class="vacation-card-info">
    <div>
      <div class="vacation-card-eyebrow">Private Villa</div>
      <div class="vacation-card-title">
        <a href="/vacations/cancun">Relaxing All-Inclusive Resort in Cancun</a>
      </div>
      <div class="vacation-card-price">$299 USD per night</div>
    </div>
  </div>
</div>

因此，通常最好將 UI 的可重用部分提取到模板片斷或 JavaScript 組件中，而不是編寫自定義 CSS 類。

通過為模板創(chuàng)建一個單一源，您可以繼續(xù)使用功能類，而不會因為在多個地方復制相同的類而造成任何的維護負擔。

創(chuàng)建模板片斷或者 JavaScript 組件

<!-- In use -->
<VacationCard
  img="/img/cancun.jpg"
  imgAlt="Beach in Cancun"
  eyebrow="Private Villa"
  title="Relaxing All-Inclusive Resort in Cancun"
  pricing="$299 USD per night"
  url="/vacations/cancun"
/>

<!-- ./components/VacationCard.vue -->
<template>
  <div>
    <img class="rounded" :src="img" :alt="imgAlt">
    <div class="mt-2">
      <div>
        <div class="text-xs text-gray-600 uppercase font-bold">{{ eyebrow }}</div>
        <div class="font-bold text-gray-700 leading-snug">
          <a :href="url" class="hover:underline">{{ title }}</a>
        </div>
        <div class="mt-2 text-sm text-gray-600">{{ pricing }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['img', 'imgAlt', 'eyebrow', 'title', 'pricing', 'url']
  }
</script>

上面的例子使用了 Vue，但同樣的方法可以用于 React 組件、ERB partials、Blade 組件、Twig includes 等。

使用 @apply 抽取組件類

對于按鈕和表單元素之類的小型組件，與簡單的 CSS 類相比，創(chuàng)建模板片斷或 JavaScript 組件通常會感覺過重。

在這種情況下，您可以使用 Tailwind 的 ?@apply? 指令輕松地將通用功能模塊提取到 CSS 組件類中。

這是一個示例，使用 ?@apply? 從現有功能類中組合成 ?btn-indigo? 類：

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

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

為了避免意外的特定性問題，我們建議您使用 ?@layer components { ... }? 指令包裝您的自定義組件樣式，以告訴 Tailwind 這些樣式屬于哪一層。

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

@layer components {
  .btn-blue {
    @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;
  }
}

Tailwind 會將這些樣式自動移到與 ?@tailwind components? 相同的位置，因此您不必擔心在源文件中正確放置順序。

使用 ?@layer? 指令還將指示 Tailwind 在清除 ?components ?層時考慮使用哪些樣式進行清除。

編寫組件插件

與自定義實用程序一樣，您可以使用 ?@variants? 指令生成您自己的自定義組件的?responsive?、?hover?、?focus?、?active?和其他 ?variants?：

/* ... */

@layer components {
  @variants responsive, hover {
    .btn-blue {
      @apply py-2 px-4 bg-blue-500 ...;
    }
  }
}

除了直接在 CSS 文件中編寫組件類外，您還可以通過編寫自己的插件將組件類添加到 Tailwind 中 ：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents, theme }) {
      const buttons = {
        '.btn': {
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          borderRadius: theme('borderRadius.md'),
          fontWeight: theme('fontWeight.600'),
        },
        '.btn-indigo': {
          backgroundColor: theme('colors.indigo.500'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.indigo.600')
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

如果您想將 Tailwind 組件發(fā)布為庫，或者可以更輕松地在多個項目中共享組件，這是一個不錯的選擇。