Tailwind CSS 首頁
  1. 核心概念
  2. 實用程式優先基礎

概觀

傳統上，每當您需要在網路上設定樣式時，您會撰寫 CSS。

使用傳統方法，其中自訂設計需要自訂 CSS

ChitChat

您有一則新訊息！

<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 {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

使用 Tailwind，您可以直接在 HTML 中套用預設的類別來設定元素樣式。

使用工具程式類別來建立自訂設計，而無需撰寫 CSS

ChitChat

您有一則新訊息！

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

在上述範例中，我們使用了

  • Tailwind 的 flexbox 和 padding 工具程式 (flex、shrink-0 和 p-6) 來控制整體卡片版面
  • max-width 和 margin 工具程式 (max-w-sm 和 mx-auto) 來限制卡片寬度並將其置中
  • background-color、border radius 和 box-shadow 工具程式 (bg-white、rounded-xl 和 shadow-lg) 來設定卡片的外觀
  • width 和 height 工具程式 (w-12 和 h-12) 來調整標誌圖片的大小
  • space-between 工具程式 (space-x-4) 來處理標誌和文字之間的間距
  • font-size、text color 和 font-weight 工具程式 (text-xl、text-black、font-medium 等) 來設定卡片文字的樣式

此方法讓我們能夠實作完全自訂的元件設計，而無需撰寫任何一行自訂 CSS。

現在我知道你在想什麼，「這真是太可怕了，簡直一團糟！」，你說得沒錯，它確實有點醜。事實上，第一次看到時幾乎不可能認為這是一個好主意 — 你必須實際嘗試看看。

但是一旦你實際用這種方式建立了一些東西，你很快就會注意到一些非常重要的優點

  • 您不會浪費精力發明類別名稱。不再需要新增愚蠢的類別名稱，例如 sidebar-inner-wrapper，才能設定樣式，也不必再為實際上只是一個彈性容器的事物苦惱於完美的抽象名稱。
  • 您的 CSS 會停止增長。使用傳統方法，每次新增新功能時，您的 CSS 檔案都會變大。使用公用程式，所有內容都是可重複使用的，因此您很少需要撰寫新的 CSS。
  • 進行變更感覺更安全。CSS 是全域性的，您永遠不知道在進行變更時會中斷什麼。HTML 中的類別是區域性的，因此您可以變更它們，而不用擔心其他內容會中斷。

當您了解到使用預先定義的公用程式類別，只在 HTML 中工作可以有多麼有效率時，使用其他任何方式都會感覺像酷刑。

何不直接使用內嵌樣式？

對於這種方法，常見的反應是好奇，「這不就是內嵌樣式嗎？」在某些方面來說，是的 — 您直接將樣式套用至元素，而不是指定類別名稱，然後設定該類別的樣式。

但是，使用公用程式類別比內嵌樣式有幾個重要的優點

  • 使用限制進行設計。使用內嵌樣式，每個值都是神奇數字。使用公用程式，您從預先定義的 設計系統 中選擇樣式，這使得建立視覺上一致的 UI 變得容易許多。
  • 回應式設計。您無法在內嵌樣式中使用媒體查詢，但您可以使用 Tailwind 的 回應式公用程式 輕鬆建立完全回應式的介面。
  • 滑鼠懸停、焦點和其他狀態。內嵌樣式無法針對滑鼠懸停或焦點等狀態，但 Tailwind 的狀態變體可輕鬆使用工具程式類別為這些狀態設定樣式。

此元件完全響應式，並包含具有滑鼠懸停和焦點樣式的按鈕，且完全使用工具程式類別建置

Woman's Face

Erin Lindford

產品工程師 

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

可維護性疑慮

使用優先使用工具程式的做法時，最大的可維護性疑慮在於管理重複出現的工具程式組合。

這可以透過萃取元件和部分，以及使用編輯器和語言功能（例如多游標編輯和簡單迴圈）輕鬆解決。

<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>

除此之外，維護優先使用工具程式的 CSS 專案比維護大型 CSS 程式碼庫容易許多，原因很簡單，因為 HTML 比 CSS 容易維護許多。GitHub、Netflix、Heroku、Kickstarter、Twitch、Segment 等大型公司都非常成功地使用這種做法。

如果您想聽聽其他人使用這種做法的經驗，請查看以下資源

如需更多資訊，請查看優先使用原子/工具程式 CSS 的案例，由John Polacek策劃。