前言

在開發前端頁面時我們有多種樣式開發的選擇，可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等，為了達到加速開發的目的，通常我們會選擇後面兩者(使用UI Framework或Utility-first Framework)來進行開發。

大綱

1. UI Framework vs. Utility-first Framework\
2. TailwindCSS簡介

1.UI Framework vs. Utility-first Framework

首先我們來比較一下兩者的優缺點

UI Framework（使用者介面庫）

Boostrap4、Material UI、Ant Design

優點：

1. 快速建立使用者介面： 專注於使用者介面的建立，提供了豐富的元件和工具，讓開發人員能夠輕鬆建立使用者友好的介面。

2. 外觀一致性： 使用者介面庫通常提供預定義的樣式和主題，確保應用程式具有一致的外觀和風格，減少了設計工作的需求。

3. 元件重複使用： 提供可重複使用的使用者介面元件，可以在應用程式的不同部分多次使用，提高了開發效率。

缺點：

1. 不容易客製： 修改和客製使用者介面庫的樣式和行為可能會比較複雜，有時需要深入了解庫的內部工作原理才有辦法改動其樣式和行為。

2. 依賴性： 通常需要與特定的使用者介面框架或庫一起使用，這可能會引入額外的依賴性和複雜性。

Utility-first Framework

TailwindCSS

優點：

1. 高度客製化： 工具庫可以依照需求高度地進行客製化，通常都配有相關客製化設定檔（例如:主題色設定），且不會影響到其他元素的樣式。
2. 快速開發： 像 Tailwind CSS這種 Utility-first Framework 已經提供了大量的預定義class，可以輕鬆地應用於 HTML 上。
3. 原子級(atomic)class： 每個class通常只負責一個 CSS 屬性或屬性值。這種原子級的設計允許開發人員組合多個class以實現所需的樣式。

缺點：

1. 學習曲線高： 不太適合新手，因為工具庫會有自定義的class和概念，學習如何使用工具庫以及如何將其整合到專案中需要時間熟悉。
2. 樣式複雜性： 在處理複雜的使用者介面和樣式需求時，因為需要組合多個class會使得class變得複雜和冗長。

UI Framework和Utility Framework各有優缺點，所以還是可以依照開發情境還選擇適合的Framework。

2.TailwindCSS簡介

我們來看一下維基百科的簡介

Tailwind CSS是一個開放原始碼CSS框架。這個工具庫的主要特點是，Bootstrap5 utilities 概念接近，與jQuery UI等其他 CSS 框架不同，沒有為按鈕或表格等元素提供一系列預定義類（UI元件）。相對的，會建立一個「工具程式型（Utility）」CSS 類別列表，這些類別可用於通過混搭和媒合來設定每個元素的樣式。

在開發前端頁面時，我們多少會使用過UI Framework，以Boostrap4和Material UI來說，基本上安裝後就可以直接使用裡面已經建立好的元件(component)，UI Framework的元件通常也都很豐富，我們馬上就能生成出一個像樣的網站，但當我們要客製其樣式時就會遇到一些困難。
最大的困難就是當UI library沒特別設計客製化的方式時，我們必須要不斷地override元件原始的CSS，這種做法會造成CSS難以維護，當多人協作時，有可能造成樣式互相覆蓋，導致樣式不如預期，這時候TailwindCSS的出現就能有效解決這問題。

為什麼我要使用TailwindCSS?

1. 加速開發，不需要一直去思考class的命名（在思考CSS的命名如何更語意化花費我蠻多時間的）
2. 官方資源齊全，官網的文件非常清楚，能夠讓我快速上手。
3. 練習在React準確地將頁面分成不同component
4. 需要實現高度客製化的介面

誰不適合使用TailwindCSS

1. 還不是很熟悉CSS的新手
2. 不喜歡從0開始切版的開發者

TailwindCSS安裝

回到我們的blog-frontend專案，輸入以下指令安裝tailwindcss

npm install -D tailwindcss
npx tailwindcss init

設定tailwindcss.config

//tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在index.css內加入以下tailwind directive

/** index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

這樣我們就可以在專案內開始使用tailwindcss了

🔺官方其實已經建議不要再使用CRA，因為Create React App 不支援自訂 PostCSS 配置，並且與 PostCSS 生態系統中的許多重要工具不相容，但此時我知道這資訊時已為時已晚☹️，之後私下會再自行改寫成Next.js。CRA和Next.js的比較

🔺tailwindcss具體使用方式請見官方的文件，在這系列中不會特別提及。

安裝headlessui-react

headlessui-react 是一個由 Tailwind CSS 團隊開發的無 UI 元件庫。能讓開發者在不被任何樣式限制的情況下，能快速實現各種常用的 UI 功能(例如:下拉選單、Menu、彈窗等等)。

npm install @headlessui/react

安裝這個套件能讓我們快速產生行為較複雜UI元件，但同時又能保有樣式彈性，能依據自己想要的樣式(使用tailwindCSS)來開發。

參考資料

• TailwindCSS
• CRA和Next.js的比較