tailwindcss 官網（三）核心概念：功能類優先、響應式設計（UI、斷點）

文章目錄

• tailwindcss 官網（三）核心概念：功能類優先、響應式設計（UI、斷點）
• • 1. 功能類優先
  • • 概述
    • 為什麼不使用内聯樣式？
    • 可維護性問題
  • 2. 響應式設計
  • • 概述
    • 移動優先
    • • 定位手機螢幕
      • 定位單個斷點
    • 自定義斷點

官網：安裝 - Tailwind CSS 中文文檔

1. 功能類優先

在一組受限制的原始功能類的基礎上建構複雜的元件。

概述

傳統情況下，當您需要在網頁上設定樣式時，都需要編寫 CSS。

使用傳統方式時，定制的設計需要定制的 CSS

<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

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>
           

在上面的示例中，我們使用了：

• 使用 Tailwind 的 flexbox 和 padding 功能類 (

  flex

  ,

  flex-shrink-0

  , 和

  p-6

  ) 來控制整體的卡片布局
• 使用 max-width 和 margin 功能類 (

  max-w-sm

  和

  mx-auto

  ) 來設定卡片的寬度和水準居中
• 使用 background color, border radius, 和 box-shadow 功能類 (

  bg-white

  ,

  rounded-xl

  , 和

  shadow-md

  ) 設定卡片的外觀樣式
• 使用 width 和 height 功能類 (

  w-12

  and

  h-12

  ) 來設定 logo 圖檔的大小
• 使用 space-between 功能類 (

  space-x-4

  ) 來處理 logo 和文本之間的間距
• 使用 font size，text color，和 font-weight 功能類 (

  text-xl

  ，

  text-black

  ，

  font-medium

  等等) 給卡片文字設定樣式

這種方法使我們無需編寫一行自定義的 CSS 即可實作一個完全定制的元件設計。

我知道您在想：“這太繁瑣了，真是一團糟！” 您是對的，這有點醜陋。實際上，當您第一次看到它時，幾乎不可能認為這是一個好主意–您必須實際嘗試一下。

但是，一旦您以這種方式實際建構了一些東西，您就會很快注意到一些真正重要的優點：

• 您沒有為了給類命名而浪費精力。 不需要僅僅為了設定一些樣式而額外添加一些像

  sidebar-inner-wrapper

  這樣愚蠢的類名，不必再為了一個 flex 容器的完美抽象命名而倍受折磨。
• 您的 CSS 停止增長。 使用傳統方法，每次添加新功能時 CSS 檔案都會變大。使用功能類，所有内容都是可重用的，是以您幾乎不需要編寫新的CSS。
• 更改會更安全。 CSS 是全局性的，您永遠不知道當您進行更改時會破壞掉什麼。您 HTML 中的類是本地的，是以您可以更改它們而不必擔心其他問題。

當您意識到在 HTML 中使用預定義的功能類是多麼的富有成效時，以任何其他方式工作都感覺像是折磨。

為什麼不使用内聯樣式？

對這種方式的一個普遍反應是, “這不就是内聯樣式嗎？” 在某些方面是 — 您是将樣式直接應用于元素，而不是為元素配置設定一個類，然後在這個類中設定樣式。

但是使用功能類比内聯樣式具有一些重要的優點：

• 基于限制的設計. 使用内聯樣式, 每個值都是一個魔術數字。 使用功能類, 您是從預定義的設計系統中選擇樣式，這使得建構統一的UI變得更加容易。
• 響應式的設計. 在内聯樣式中您不能使用媒體查詢, 但您可以使用 Tailwind 的響應式功能類非常容易的建構完全響應式的界面。
• Hover, focus, 以及其它狀态. 内聯樣式無法設定 hover 或者 focus 這樣的狀态, 但 Tailwind 的狀态變體使用功能類可以非常容易的為這些狀态設定樣式。

該元件完全響應，并包括具有 hover 和 focus 樣式的按鈕，完全由功能類建構：

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md 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:flex-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-gray-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>
           

您也可以使用 Tailwind 的

@apply

功能建立抽象的 CSS 類。

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>
           

除此之外，維護功能優先的 CSS 項目比維護大型 CSS 代碼庫要容易得多，因為 HTML 比 CSS 維護容易得多。諸如 GitHub，Heroku，Kickstarter，Twitch，Segment 等大型公司都在使用這種方法，且取得巨大成功。

如果您想了解其他人使用此方法的經驗，請檢視以下資源：

• By The Numbers: A Year and a Half with Atomic CSS by John Polacek
• Building a Scalable CSS Architecture by Sarah Dayan of Algolia
• Diana Mounter on using utility classes at GitHub, a podcast interview

檢視 John Polacek 策劃的 The Case for Atomic/Utility-First CSS 了解更多資訊。

2. 響應式設計

使用響應式功能變體建構自适應的使用者界面。

概述

Tailwind 中的每個功能類都可以有條件的應用于不同的斷點，這使得您可以輕松的建構複雜的響應式界面而不用離開 HTML。

根據常用的裝置分辨率方案，預設内置了 5 個斷點：

斷點字首	最小寬度	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

要添加一個僅在特定斷點生效的功能類，隻需要在該功能類前加上斷點名稱，後面跟

:

字元。

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">
           

這适用于架構中的每一個功能類，這意味着您可以在給定的斷點更改任何東西，甚至包括字元間距和光标樣式之類的内容。

這是一個簡單的營銷頁面元件的示例，該元件在小屏上使用堆疊式布局，在大屏上使用并排布局。(調整浏覽器大小以檢視實際效果)：

<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>
           

我們看一下上面的示例是如何工作的：

• 預設情況下，外部

  div

  采用了

  display: block

  ，但是通過添加

  md:flex

  功能類，它在中等及以上螢幕會應用

  display: flex

  樣式。
• 當父級元素是一個 flex 容器時，我們想確定圖檔不會縮小，是以我們添加了

  md:flex-shrink-0

  ，以防止在中型和更大尺寸的螢幕上縮小。 從技術上講，我們本可以使用

  flex-shrink-0

  ，因為它在較小的螢幕上什麼也不做，但是由于隻和

  md

  螢幕有關, 是以最好在類名中注明。預設情況下在小螢幕上圖檔會自動設定為全屏寬度。在中等及以上螢幕，我們限制他的寬度為一個固定的大小

  md:w-48

  。

在這個示例中，我們僅使用了一個斷點，但是您也可以非常容易的使用其它

sm

,

lg

, 或者

xl

等響應式字首來定制這個元件。

移動優先

預設情況下，Tailwind 使用移動優先的斷點系統，類似于 Bootstrap 這些其它架構中的用法。

這意味着未加字首的功能類 (像

uppercase

) 在所有的螢幕上都有效，而加了字首的功能類（如

md:uppercase

）僅在指定斷點及以上的螢幕上生效。

定位手機螢幕

這種方式最令人們驚訝的地方是，要為移動裝置設計樣式，您需要使用無字首的功能類，而不是帶

sm:

字首的版本。不要将

sm:

了解為"在小螢幕上"，而應将其視為"在小斷點處"。

不要使用

sm:

來定位移動裝置

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>
           

使用無字首的功能類來定位移動裝置，并在較大的斷點處覆寫它們

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>
           

是以，通常最好先為移動裝置設計布局，接着在

sm

螢幕上進行更改，然後是

md

螢幕，以此類推。

定位單個斷點

Tailwind 的斷點僅包括

min-width

而沒有

max-width

, 這意味着您在較小的斷點上添加的任何功能類都将應用在更大的斷點上。

如果您隻想在一個斷點上應用某個功能類，解決方案是在更大的斷點上添加另一個功能類，用來抵消前一個功能類的效果。

這是一個示例，其中背景顔色僅在

md

斷點處是紅色，在其它斷點處皆為青綠色：

<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500">
  <!-- ... -->
</div>
           

請注意，我們不必為

sm

斷點或

xl

斷點指定背景色，您隻需要指定一個功能類何時開始生效，而不是何時結束。

自定義斷點

您可以在

tailwind.config.js

檔案中完全自定義您的斷點：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}
           

在 自定義斷點文檔 中了解更多.