作者：陳俊佑 / 臺灣大學計算機及資訊網路中心/程式設計組行政專員
學Tailwind CSS像做披薩，配料隨心選，放上鳳梨更可以烤出獨一無二的風味！
前言
大家好，我是富田町47番地的社畜工程師柚子哥，大型專案的系統開發案通常會分工合作，例如業界會分成需求訪談、前端介面開發、後端程式碼、資料庫設計、交付測試，但台大內部的系統通常都是小系統為主，所以通常我們都是一條龍服務，我就是那一條龍。
而一條龍服務中我最不會的就是前端CSS，以往都是使用Bootstrap，Bootstrap是元件式框架（Component-based Frameworks），這類框架提供預設的UI元件，如按鈕、表單、導航欄等，初次學習的學習曲線很緩，很方便快速搭建完整的網站介面。使用上class套上去就可以使用，但是要細部客製化時卻因為我不熟悉css語法，常常牽一髮動全身，最後我只會愚笨的覆蓋預設樣式解決，而Bootstrap從3版升到5版寫法完全不同，讓我改版改的很難受，而要上線前精簡Bootstrap沒有使用的CSS 和 JavaScript又是另一道門檻。
但是某次因緣際會發現了Tailwind CSS這個名詞，仔細深入瞭解才發現他是實用優先框架（Utility-First Frameworks），我跟我們組內的美工同事討論這個框架，同事一開始很不適應，因為用法跟傳統CSS寫法完全不一樣，使用上會懷疑人生「這麼多 class 塞在HTML裡，很難看清楚跟維護」，但對於我完全沒有學過css的後端工程師來說超好用的，我們後端工程師就是講求會動就好的心態，要什麼樣式就塞對應的class進去實在是太符合我們無腦的使用，而且Tailwind CSS官網的搜尋做的很讚，不知道的class就去查就找的到，而我最常改的rwd居然只要加個簡單的前綴（如 sm:、md:）就可以簡單完成，連瀏覽器的暗黑模式也只要加個(dark:)就完成了，完美符合我頭腦簡單的使用法則。
不過class越加越多維護上的確是不小的麻煩點，但由於我後端是用C#，前端是用alpine.js框架，所以我用C#的Razor語法把HTML拆分小區塊，使用alpine.js的bind語法做一些簡單的class切換，也就讓整體的HTML不會這麼的難看，至少是我可以接受的範圍。
總結我對Tailwind CSS看法就像是像做披薩，配料隨心選，放上鳳梨更可以烤出獨一無二的風味！
以下是從零開始使用Tailwind CSS的流程，以及我會把alpine.js一起加進來build。
步驟一、建立資料夾，開啟Vs code
首先創建一個空資料夾，我把我的資料夾命名為TWcssLab，啟動vscode並選擇【開啟資料夾】，選擇剛剛建立好的資料夾。
圖1. Vscode啟動。
步驟二、安裝延伸模組(建議)
點開左邊的延伸模組選單，輸入Tailwind CSS IntelliSense去搜尋延伸模組。滿建議安裝官方的延伸模組，自動補字可以節省時間，即便忘記語法也可以靠自動補字去驗證看有沒有這個語法，真的是滿方便的東西。
圖2.延伸模組。
圖3. Tailwind CSS IntelliSense
步驟三、用npm安裝Tailwind CSS
首先在視窗左上方點【檢視】=>【終端】，開啟終端機，並在終端機輸入【npm install -D tailwindcss 】、【npx tailwindcss init】，就會開始安裝，如果出現錯誤可能是沒有安裝Node.js，可以先去node.js官網下載安裝https://nodejs.org/。
這邊簡單解釋指令用意
指令：npm install -D tailwindcss
- npm：使用 Node.js 的包管理器來執行命令。
- install：表示安裝某個 NPM 包。
- -D（或 --save-dev）：將安裝的包記錄為開發依賴（devDependencies）。
- 開發依賴只在開發階段使用，生產環境不會包含這些依賴，適合像 Tailwind CSS 這種主要用於開發工具的包。
- tailwindcss ：這是要安裝的 NPM 包名稱，即 Tailwind CSS 的核心庫。
指令：npx tailwindcss init
- npx：Node.js 提供的工具，用於執行來自 NPM 包的 CLI 工具，而不需要全局安裝。
- tailwindcss：表示使用剛安裝的 Tailwind CSS 包。
- init：Tailwind CLI 提供的一個命令，用來初始化一個 Tailwind CSS 配置檔案。
圖3.開啟終端機
圖4.輸入安裝指令
圖5.輸入安裝指令
安裝完成資料夾就會多一個tailwind.config.js的配置檔案，我們要在配置檔案的content定義 Tailwind CSS 工具需要掃描的檔案範圍，用於檢測哪些 CSS 類別被使用。
官方寫法是content: ["./src/**/*.{html,js}", "*.html"],。
【./src/**/*.{html,js}"】：表示掃描 src 資料夾及其所有子目錄中，擁有 .html 或 .js 擴展名的檔案。
*：匹配任意名稱的文件。
**：匹配任意子目錄。
{html,js}：多擴展名的匹配方式。
【"*.html"】：表示掃描專案根目錄下所有 .html 文件（不包含子目錄）。
圖6.安裝完成
圖7.配置檔案
Plugins則是用於添加Tailwind的插件，進一步擴展功能或樣式庫。之後有機會在寫一篇官方的插件使用心得。
再來就是要創建一個CSS文件中添加@tailwind指令來導入Tailwind的三個核心樣式層，我們依照官方的方法創建src資料夾，並在資料夾創建一個input.css的檔案。並在input.css檔案中加入@tailwind base;@tailwind components;@tailwind utilities;。
三個核心樣式層的功能表格如下
|
樣式層
|
指令
|
功能
|
用途
|
標籤樣式
|
|
基礎層 (Base Layer)
|
@tailwind base;
|
定義 HTML 元素的預設樣式，例如重置或標準化樣式（類似 Normalize.css）。
|
提供統一的瀏覽器渲染基礎，讓不同瀏覽器的樣式一致。
|
h1、p、a
|
|
元件層 (Components Layer)
|
@tailwind components;
|
定義可重複使用的樣式規則，用於樣式化自訂元件。
|
管理複用樣式，減少代碼重複，提高維護性。
|
.container 類：
|
|
工具類層 (Utilities Layer)
|
@tailwind utilities;
|
提供高度可定制的功能性工具類別
|
用於快速設計和微調 UI，提供靈活的工具來應對各種需求。
|
text-center、bg-blue-50
|
放置順序不可以錯base → components → utilities，因為base 提供基礎樣式、components 依賴於 base 中的樣式，utilities 則是用於覆蓋和調整 base 和 components。
圖8.創建src資料夾
圖9.導入Tailwind的三個核心樣式層
步驟四、安裝alpine.js框架跟esbuild綑綁器(非必要)
alpine.js好用的程度不言而喻，可以看看前幾期電子報我寫的介紹，我這邊就不詳述，而esbuild綑綁器是打包JS跟CSS的方便利器，也滿建議安裝的。這邊因為我會安裝所有alpine.js套件，所以用esbuild綑綁起來。
終端機輸入【npm install --save-exact --save-dev esbuild】安裝esbuild，輸入【npm install alpinejs】安裝alpine.js，alpine.js還有其他好用的套件我也一起安裝，【npm install @alpinejs/mask】、 【npm install @alpinejs/intersect】、【npm install @alpinejs/persist】、【npm install @alpinejs/focus】、【npm install @alpinejs/collapse】、【npm install @alpinejs/anchor】、【npm install @alpinejs/morph】。
依樣在src資料夾底下創建一個input.js的檔案把alpine的所有套件一起匯入。
圖10.創建一個input.js
圖11.import所有套件
步驟五、CLI build
經過上面四個步驟我們的實驗環境都架設的差不多，最後我們需要的是啟動CLI來build我們的css，官方寫法是在終端機啟動【npx tailwindcss -i ./src/input.css -o ./src/output.css --watch】，-- watch是啟用檔案監控模式，當檔案（例如 HTML 或 JavaScript 文件）發生變化時，Tailwind 會重新掃描 content 配置中的檔案，並自動更新 output.css。
但這一段很長所以通常我會在package.json中寫個簡短的scripts去取代他。另外順便寫一個用esbuild去綑綁alpine。
"scripts": {
"build-css": " npx tailwindcss -i ./src/input.css -o ./public/style.css --watch",
"build-js": "npx esbuild src/input.js --outfile=public/scripts.js --bundle"
}
這樣就只需一在終端機輸入【npm run build-css】就會啟動build了。
圖12. scripts
圖13.run
步驟六、測試效果
經過上面5步驟，我們就在根目錄開一個index.html，把build在public中的css引入。寫一個div並在class中試寫【w-80 h-20 bg-blue-400】。
w-80 =>設定元素的寬度（width），Tailwind 的比例系統基於 4px，w-80 的值是 80 × 4px = 320px。
h-20=>設定元素的高度（height）20 × 4px = 80px。
bg-blue-400=>設定元素的背景顏色，400 是深淺級別，範圍從 50（最淺）到 900（最深）。
Tailwind用數字來表示由淺到深的設計深得我心，實在是個很實用的想法，可以利用數字快速抓出頁面上的漸層感與關注點的顏色，超方便，尤其設計buttom時就會覺得好用，我們下一期來玩玩顏色的部分。
如果顯示出來的畫面跟我的圖15一樣，那就代表成功的build出css。
圖14.HTML
圖15.效果
結語
我們計中內部都是一條龍工程師，對於前端框架通常都會優先使用Bootstrap，畢竟網路上很多開源資源可以用，JS插件也非常豐富，快速製作小型系統可以說是非常適合，但我滿喜歡挑戰新的事物，學了才發現Tailwind css 跟輕前端框架alpine.js真的是天作之合，更適合小型系統，只不過所有元件要自己先建好，初期建立元件才是最花時間的，一但建好之後，要修改細部class就很簡單，所以也推薦大家使用看看，學了不會吃虧。
參考資料