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

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

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

這邊來簡介一下 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;

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，下一篇我們會實際用它來切版首頁樣式！