(不知道為什麼第一時間是想到小櫻XD)

在資策會受訓的時候，我第一個學會的 UI 框架是 Bootstrap。它是一個由 Twitter 開發的開源前端框架，主要目的是幫助開發者快速構建響應式網頁。它提供許多附有現成的 CSS 樣式與 JS 元件，讓開發者不必從頭設計網頁的 Layout、CSS 樣式，甚至是元件。但要開發一個高度客製化的網頁時，就會覺得這雙靴子 (Boots)似乎不太合腳，甚至還有種踩到陷阱 (trap)的感覺（在電腦前寫出這個爛笑話並肆無忌憚大笑的我向大家道歉）。

在我認識 Tailwind 之前，曾使用 Bootstrap 來作為職訓作品的 UI 框架，就遇到要修改 Bootstrap 元件預設樣式的問題，主要有兩個方法：

1. 自定義 CSS 樣式，並使用 !important 覆蓋
2. 自定義 SASS/SCSS 變數來修改全局樣式

但隨著時間拉長，專案有可能會越變越大，管理維護樣式也會越來複雜，就像我現在的公司某些專案的 SCSS 檔案複雜到要修個樣式，就要花一段時間翻找、調整，躁感直線upupˋˊ哀~

我在結訓後，接受某間公司的面試時，面試官極力推薦學習 Tailwind CSS，加上職訓隔壁班已經工作的同學時不時地吹捧 Tailwind，我決定親自來會一會這個 CSS 框架，沒想到學了之後整個回不去。

簡單介紹一下 Tailwind CSS，他是一個 2017 年推出的主打原子式、功能優先的 CSS 框架，Class 命名方式和 Bootstrap 很相似，基本上會了 Bootstrap 轉而學 Tailwind，可以算是無痛，而且客製化程度更高 (這邊預計下篇會接續說明><)。在閱讀其他文章時，常看到形容 Tailwind 是輕量的，深入了解後才知道，在專案的打包階段，未使用到的 class 會被移除，達到讓效能更好的目的。

但這麼好的東西難道就沒缺點嗎？當然有！最常被提及的確點就是 className 容易被寫得漏漏長的，排序還很雜亂。我前公司的同事曾向我推薦管理 Tailwind class 排序的插件，但她似乎因為眼睛疲勞，還是忍不住每寫一個 class 就空一行XD，所以大一點的專案單靠 Tailwind CSS 框架似乎還嫌不足，最好還是有搭配的 UI 框架進行開發（這邊預計下下篇會接續說明><）

今天我們先來看看安裝流程～

官方文件安裝流程其實說得非常清楚，甚至提供各個前端框架的安裝流程，真的是非常貼心呢！在這裏我們跟著官方文件使用 Next.js 來示範：

1. 招喚魔法陣第一步：打開 VS code，打開終端機，建立 Next.js 專案，並將路徑指向該專案

   npx create-next-app@latest my-project --typescript --eslint --app
   cd my-project
   

2. 招喚魔法陣第二步：安裝 Tailwind CSS。

   npm install tailwindcss @tailwindcss/postcss postcss
   

3. 招喚魔法陣第三步：手動在專案的根目錄建立 postcss.config.mjs，在 plugins 中加入 tailwind CSS。

   const config = {
    plugins: {
    "@tailwindcss/postcss": {},
    },
   };
   
   export default config;
   

4. 招喚魔法陣第四步：打開/app/globals.css，這個是該專案最上層的 CSS 檔，導入 Tailwind。

   @import "tailwindcss";
   

5. 招喚第五步～順風。啟動～就可以將專案 run 起來看看，試試使用 Tailwind CSS 的咒語囉～

   npm run dev