Tailwind CSS

Tailwind CSS 介紹及應用

林佩郁 Lina Lin 2020/12/15 11:17:04
162

前言

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

比較 Tailwind 與 Bootstrap 差異

  Tailwind  Bootstrap
Framework  Utility Framework
UI Framework
壓縮後的檔案大小 ★★★ ★★★
客製化程度 ★★★★ ★★★
上手難易度 ★★★★ ★★
適用人群

1.想高度客製版面

2.有經驗的開發人員

1.想快速套用主題版面

2.適合初學者入門

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

林佩郁 Lina Lin