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

Published on

上一篇我們成功安裝完 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-xstext-smtext-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.cssindex.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 鐵人賽