Tailwind CSS 介紹及應用

前言

今天來跟大家推薦 Tailwind CSS，它並不像Bootstrap、Material-UI一樣提供我們許多設計精美的UI元件，而是提供各種好用的class工具讓我們依照我們的需求去高度客製化，也不會發生因為使用了CSS框架中設計好的元件，造成初期開發神速，到了中後期要更改的時候就寸步難行事件發生。

比較 Tailwind 與 Bootstrap 差異

Tailwind 提供了超級多的單一功能的CSS class (例如.m-1 代表margin: 0.25rem)。 改用 Tailwind 後，我們首先會使用它眾多的 class，偶有框架無法解決的部分才會考慮自己撰寫CSS。

這樣一來也解決了命名 class 的問題(例如.layout-topbar-wrapper)，再也不用想 class 想破頭，一切讓 Tailwind 幫我們搞定。

安裝

使用 npm 安裝 Tailwind

npm install tailwindcss

使用方法

在css中加入以下語法就能開始使用 Tailwind

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

小範例

如果只想要感受一下 Tailwind 的魅力，可以到 Tailwind Play 體驗，Tailwind Play 是 Tailwind 官方架設的線上環境，官方保證與我們在本機操作時有一樣的環境，可以自訂 config 文件、使用功能(例如: @apply)，或者是自己加入第三方套件都可以！

今天我們就用 Tailwind Play 做一個卡牌翻面的畫面，可以開啟 這邊 看看最終效果～

因為我們此篇文章重點是在於介紹 Tailwind CSS，所以針對CSS屬性的部分並不會講得非常詳細，對教學中某些屬性有興趣的同學，可以自行 google ～現在讓我們開始吧～

進入 Tailwind Play 會發現他的畫面分成左右兩部分，左側是編輯器，上方有三個頁籤，分別是HTML、CSS、Confing，右側是即時畫面。他已經有寫好的範例，但我們今天沒有要用這個範例，所以可以直接全選刪掉左邊HTML中的所有東西。

我們先將灰色背景做出來，建立一個 div 然後加上 class。

<div class="bg-gray-100 min-h-screen w-full">

</div>

這邊我們先來看這幾個 class 是什麼意思。

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}

看完之後是不是發現就跟我們以前在 Bootstrap 使用的 class 一樣用法，只是命名規則略有不同，一開始使用時，因為不熟其命名規則，所以請大家記得勤奮的多翻翻 官方字典 。

接下來我們來做卡片，一樣建立一個 div 然後加上 class，這邊因為卡片有兩個面，所以裡面請包上兩個 div。

<div class="relative h-md w-md">
    <div class=" h-full w-full rounded-2xl shadow-xl bg-gradient-to-b from-red-200 to-blue-200">正面</div>
    <div class=" h-full w-full rounded-2xl shadow-xl bg-white">背面</div>
</div>

然後你會發現 h-md、w-md 是什麼東西 ? 為什麼你沒有這個東西？別慌，這是利用 Config 加上的自定義 utility class，有時候我們需要的 utility class 不在 字典 裡面就可以這樣做，我們先將頁籤切換到 Config，然後把中間的 colors 部分刪掉，這是原本範例中用到的，我們並不會用到這邊的東西，我們會自己加上我們需要的部分，完整的程式碼如下圖。

module.exports = {
  theme: {
    extend: {
      height: {
       md: '240px',
      },
      width: {
       md: '160px',
      },
    },
  },
  variants: {},
  plugins: [],
}

目前畫面會變成下面圖中的樣子。

再來，相信你也有注意到，我們的 class 變得落落長的，有一些組合同時用於不同的 div 中，像這種時候，我們可以使用 @apply 來將這些 utility class 收斂起來，我們先將頁籤切到 CSS 的部分，然後加入以下的程式碼。

.card {
  @apply h-full w-full rounded-2xl shadow-xl transform cursor-pointer;
}

然後將 HTML 中，原本重複的 utility class 替換成我們自訂的新名稱。(想看目前程式碼與畫面請點這邊)

<div class="relative h-md w-md">
    <div class="card bg-gradient-to-b from-red-200 to-blue-200">正面</div>
    <div class="card bg-white">背面</div>
</div>

現在看來是不是比較乾淨了一點呢?接下來我們將卡片的正面背面合起來，並且做出翻卡片的部分。

這邊目前我們使用了幾個沒有在 字典 中的屬性(transform-style、backface-visibility)與在 字典 中雖然有屬性，但並沒有擴充到我們想要用的方法，像這種時候，我們就無法直接在 Config 中擴充，而是要自己在 CSS 中撰寫。

.card {
  @apply absolute h-full w-full rounded-2xl shadow-xl transform cursor-pointer;
  backface-visibility:hidden;
}

.transform-style-3d {
  transform-style:preserve-3d;
}
.transform-style-3d:active {
  transform:rotateY(180deg);
}
.transform-rotateY-180 {
  transform:rotateY(180deg);
}

這邊有兩個重點有提出來說，第一個是我們自定義的 class 可以同時用 @apply 與一般 css 的寫法，不會有衝突。第二個是我們自行添加的 CSS 並無法使用 utility class 的前綴字(例如：active:shadow-xl 的意思就是，滑鼠點擊時有陰影)，還是要依照一般的寫法在 CSS 中添加狀態。

目前畫面會變成下面圖中的樣子。(想看目前程式碼請點這邊)

接下來就是把卡片裝飾一下，把我們的 Disney 人物請上卡片，加上說明文字跟卡片下的白色背景，因為這邊並沒有使用到 Tailwind 裡面的特別功能只是在各個元素中加上 utility class，所以這邊的步驟略過比較多 CSS 撰寫的部分，想看詳細的程式碼請點這邊～

這邊特別要拿出來說的部份是字體，在 Tailwind 中已經經有預設幾組字體(點這裡看有哪些預設字體)可以替換，只可惜沒有中文的字體，所以我們要自己加上想要的字體集，需要先在 CSS 中 import 進我們想要的字體，注意需要放在最上方，以免 Tailwind 讀不到，我這邊是加入了google字體中的 Noto Sans 字集。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

再到 Confing 中加入擴充 utility class 的值

fontFamily: {
        'google':['Noto Sans TC', 'sans-serif'],
      },

接下來只需要按照老樣子到 HTML 中加入 class ，就可以囉～

<div class="font-google text-center w-full mb-7">
    <h1 class=" text-5xl mb-9">看看她是誰?</h1>
    <p>滑鼠左鍵長按即可將卡片翻面</span>
</div>

最後來說說 Tailwind 中的前綴詞魔法，在 Tailwind 中有許多方便的前綴詞可供選用，在這個範例中，我們會利用前綴詞來做個簡易的 RWD ，在做之前我們先來翻翻 字典 中，有關於 media 的地方，然後記熟這個部分，不然會吃虧。

記熟了我們就往 RWD 之路出發囉，首先我們先想好卡片在小螢幕上想要的大小，我這邊是用 195px X 130px，先將這個尺寸加入 Config 中。

height: {
  sm: '195px',
  md: '240px',
},
width: {
  sm: '130px',
  md: '160px',
},

然後在 CSS 的 .card-bg 中將原本的 h-md、w-md 前方冠上前綴字 sm:，變成 sm:h-md、sm:w-md，再將 h-sm、w-sm 加在其後。

.card-bg {
  @apply relative sm:h-md sm:w-md w-sm h-sm transform-style-3d transition duration-500 m-3;
}

讓我們來看看畫面呈現什麼樣子(想看目前的詳細程式碼請點這裡)

用這個前綴詞加上其他的 class 就可以組成千變萬化的畫面，CSS 檔案也很乾淨，總體來說，使用 Tailwind 中的前綴詞來製作 RWD 確實十分方便，那接下來我們可以將其他的部分慢慢完善，一樣因為這邊使用的技巧已經在上面都介紹完畢了，所以這邊的步驟就略過比較多 CSS 撰寫的部分，讓我們直接來看看最終結果，可以開啟 這邊 看看最終程式碼～

到這邊整個利用 Tailwind CSS 製作翻卡片的範例就結束囉～

結語

Tailwind CSS 一開始使用起來確實比較難上手，尤其是採用 utility class 的方式，會在 html 上留下一長串的足跡(真是看不慣也可以用 @apply 來做整理)，用久了之後卻會發現，這樣子的方法可以避免掉 class擴張到後期共用越來越多時，牽一髮而動全身的窘境。

從今年的 State of CSS 中也可以發現 Tailwind CSS 被越來越多人認識與使用，會不會取代老牌子 Bootstrap 還有待觀察，以我來說，試用後的感覺是不錯的，推薦給大家~

參考資料

Tailwind 官網

Cute sleeping Disney princesses (圖片來源)

Google Font - Noto Sans TC (字體來源)

State of CSS