🇺🇸

Day11 TailwindCSS 介紹，在 Next.js 專案安裝 TailwindCSS

Published on
Currently displaying Chinese version content. This article doesn't have a English version yet. Please stay tuned!

上一篇我們成功安裝完 GraphQL client，並在首頁顯示出文章列表了。功能做完，接下來要來切版美化樣式了！

在這邊我想使用 TailwindCSS 這套 CSS 框架來進行切版！

​
TailwindCSS，兼具開發速度與彈性的 CSS 框架

Imgur

這邊來簡介一下 TailwindCSS。

他是一套最近新出來且非常熱門的 CSS 框架，主打重點如下：

  1. 切版速度非常快，所有切版動作都是在 HTML 裡寫 class，不需要額外 css 檔案，來回比對樣式
  2. 內建一套經過設計且可擴充的設計系統 (Design System)，涵蓋間距、字體大小、顏色等，幫助你遵照規範來切版，比較不會切出視覺不一致的畫面
  3. 客製化彈性極大，幾乎所有 css 能實現的樣式都能舒服的用 TailwindCSS 方式做到，不會遇到使用其他 CSS 框架時，若需求與內建元件差距過大的話，需要很彆扭的去魔改的問題

​
TailwindCSS 概念與原理

TailwindCSS 使用起來類似 Bootstrap 等 CSS 框架，都是先預先定義了一大組 class 讓我們切版時使用，但決大部分框架的 class 粒度都很大，像是 Bootstrap 寫一個 button class，就會套用一大坨樣式出現一個還不錯的按鈕，但今天你要客製化樣式時，就要先用 devtool 看這個 class 究竟有哪些樣式，進而決定要 overwrite 哪些樣式，來符合你的需求，改起來不順手。

TailwindCSS 的 class 粒度就非常細，細到每一條常用的 css 樣式都有一組 class 組，像是 font-size 的話就有 text-xs、text-sm、text-base 等等，一路到 text-9xl 共 13 個 class。

每一個 class 對應到的樣式也非常單純，像是 text-base 就只有兩行 style：

font-size: 1rem;
line-height: 1.5rem;

text-lg 也只有兩行，數字換掉而已：

font-size: 1.125rem;
line-height: 1.75rem;

Imgur

​
Utility-first CSS Framework

TailwindCSS 官方稱這為 Utility-first CSS Framework，每個 class 只做一件事，透過組合多個 class 來完成你的佈局，客製化彈性極大。

class 命名也非常直觀，所以看到一個 html 的一整組 class 就能很快理解他究竟吃到哪些樣式。

並且 media-query、psuedo-element 等 CSS 用法也都有對應 class 能用，透過加前綴字的方式實現，像是 hover:text-red-200 指定 hover 時文字顏色要變淡紅色，lg:text-2xl 指定螢幕寬度大於 1024px 時，font-size 要是 1.5rem。

​
TailwindCSS 缺點

當然 Tailwind 也是有缺點的，如果你的網站只是個自己用的後台系統，或是 demo 用的專案，不需要好看的客製化樣式的話，用上 Tailwind 就有點多餘了，此時用 Bootstrap 之類的反而比較適合快速拉出還能看的元件。

並且 Tailwind 對 CSS 基礎知識要求比較高，你要先知道你要的效果需要用到哪些 CSS，你才可能找到對應的 Tailwind class 來用。並沒有開箱及用的 button 或 alert 元件可以直接使用。

這個問題官方有 TailwindUI 模板庫可以用，提供很多組好的常見 UI pattern 可以直接複製帶走，也有社群版的 Tailwind Components 等等。

​
在 Next.js 安裝 TailwindCSS

安裝方式可以參考 TailwindCSS 官方針對 Next.js 的教學文件，或是 Next.js 官方的 with-tailwindcss example。

安裝過程如下：

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

並在專案根目錄新增 tailwind.config.js 檔案，這檔案可用來設定 tailwindcss 行為，以及擴展設計系統 theme：

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
  // or
  // purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

這邊需要注意 purge 參數，這是用來指出你會出現 tailwindcss class name 的檔案有哪些，在 build 到正式環境時，tailwind 會依此來判斷哪些 class 沒被用到，並從最後的 css 檔案刪除，減少 bundle size。

因為我把所有 component、page 等頁面邏輯都放在 /src 底下，因此我寫成那樣，如果你不是的話，需要依照你的檔案架構修改。

再來要新增 /postcss.config.js，用來啟用 postcss：

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

最後在全站的 _app.js 會 import 的 globals.css 或 index.css 的最開頭加入以下程式碼：

tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

/* ... Other existing css styles */

最後重新 yarn dev 開啟專案，你會發現很多瀏覽器預設樣式消失了，像是 h2、h3 變小成跟 p 一樣，間距都消失了，這樣就算完成了！

不用擔心，我們下一篇會再把樣式加回來，會這樣是因為 Tailwind 跟 Bootstrap 等框架一樣，都會先 Normalize 瀏覽器預設樣式，把所有樣式的控制權交還給你定義，防止同一個網站在不同裝置看樣式會不同。

以上的程式碼改動可以在這支 commit 看到。

​
下一篇

這一篇我們成功在 Next.js 專案安裝了 TailwindCSS，下一篇我們會實際用它來切版首頁樣式！

本文同步發佈在 iT 邦幫忙 2021 iThome 鐵人賽