乜嘢係 Tailwind CSS？
Tailwind CSS 係一個功能優先嘅 CSS 框架，佢透過提供大量原子化、可組合嘅實用類（Utility Classes）嚟幫開發者快速構建自訂用戶界面。同傳統嘅 Bootstrap 等組件庫唔同，Tailwind 唔提供預製、帶有固定樣式嘅組件（例如按鈕、卡片），而係提供咗一系列細粒度嘅類，好似 .p-4、.text-blue-500、.flex 噉。開發者透過將呢啲類組合喺 HTML 元素上面，就可以「即時」構造出所需嘅樣式，從而大大提升咗樣式開發嘅靈活性同效率。
佢嘅核心哲學係「約束下嘅自由」。佢提供咗一套精心設計嘅設計系統，包括間距、顏色、字體大小、斷點等等，開發者喺呢個系統內進行創作，既可以保證設計嘅一致性，又可以避免編寫大量重複嘅自訂 CSS。呢種方法顯著減少咗喺樣式檔案同 HTML 檔案之間頻繁切換嘅認知負擔，令開發者能夠更加專注於構建功能本身。
點樣開始用 Tailwind CSS
將 Tailwind CSS 整合到你嘅項目入面主要有兩種方式：透過 CDN 快速體驗，或者透過構建工具進行正式嘅項目開發。
推薦閱讀 Tailwind CSS 中文實戰指南：從零構建現代化響應式UI。
透過 CDN 快速體驗
對於學習或者快速整啲原型，最簡單嘅方法就係用 Play CDN。你只需要喺 HTML 檔案嘅 標籤入面加一個腳本連結。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-blue-600">
你好呀！Tailwind CSS！有咩可以幫到你？想知點樣快速上手，定係遇到咗啲問題需要解決？
</h1>
</body>
</html>呢種方法簡單快捷，但係就冇咗 Tailwind 嘅一啲高級功能，例如 tree-shaking、生產環境優化等等，所以唔建議用喺正式嘅生產項目度。
透過 PostCSS 進行項目整合
對於現代前端項目（例如用 Vite、Next.js、Webpack），建議透過 PostCSS 嚟安裝。首先，用 npm 或者 yarn 安裝 Tailwind 同埋佢嘅依賴。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init呢個指令會生成一個 tailwind.config.js 設定檔。跟住，你需要喺項目嘅 CSS 入口檔案（通常係 ./src/index.css 或 ./src/input.css）中引入 Tailwind 嘅指令。
@tailwind base;
@tailwind components;
@tailwind utilities;最後，設定你嘅構建工具（例如 Vite 或者 Webpack）去用 PostCSS 處理 CSS 檔案。對於 Vite 項目，通常會自動識別 postcss.config.js 檔案。完成呢啲步驟之後，你就可以喺項目嘅 HTML 或者 JSX 檔案入面開始用 Tailwind 嘅實用類喇。
推薦閱讀 掌握 Tailwind CSS：由入門到精通嘅實用組件開發指南。
核心實用類同響應式設計
Tailwind CSS 嘅威力在於佢龐大而系統化嘅實用類集合。呢啲類涵蓋咗佈局、間距、排版、顏色、邊框、效果等所有 CSS 屬性。
常用實用類示例
佈局同間距係日常開發中最常用嘅部分。.flex、.grid 用嚟創建佈局；.p-4、.m-2 用嚟控制內邊距同外邊距；.space-x-4 可以為彈性佈局嘅子元素之間加水平間距。
排版同顏色類就直接控制文字同背景嘅外觀。.text-xl 設定字體大細，.font-semibold 設定字體粗細，.text-gray-700 設置文本顏色，.bg-blue-100 設定背景色。
邊框同圓角類如 .border、.rounded-lg 可以快速加邊框同圓角效果。效果類如 .shadow-md 用嚟加陰影，.transition-all 用嚟加過渡動畫。
實現響應式設計
Tailwind 採用移動優先嘅斷點系統。所有實用類默認應用喺所有屏幕尺寸，你可以透過加前綴嚟指定喺特定斷點及以上生效。內置嘅斷點前綴有：sm: （640px）、md: （768px）、lg: （1024px）、xl: （1280px）、2xl: （1536px）。
例如，以下代碼創建咗一個喺移動端堆疊、喺中等屏幕上水平排列嘅佈局：
推薦閱讀 深入理解 Tailwind CSS：從原理到實戰嘅樣式構建指南。
<div class="flex flex-col md:flex-row">
<div class="p-4 md:w-1/2">左邊內容</div>
<div class="p-4 md:w-1/2">右邊內容</div>
</div>呢種聲明式嘅方法令到構建響應式界面變得非常直觀同高效，你唔使離開 HTML 檔案去編寫媒體查詢。
高級功能同自訂設定
除咗基礎使用，Tailwind 仲提供咗好多強大功能嚟應對複雜場景。
使用懸停同焦點狀態
Tailwind 提供咗狀態變體前綴，等你可以輕鬆噉為互動狀態加樣式。常用嘅有 hover:、focus:、active:、disabled: 等等
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
点击我
</button>自訂設計系統
雖然 Tailwind 提供咗完善嘅默認設計系統，但你完全可以根據項目品牌進行深度定制。呢個係透過修改 tailwind.config.js 檔案嚟實現嘅。
例如，你可以擴展或者覆蓋主題入面嘅顏色、字體、間距等等。以下配置加咗自訂品牌色同擴展咗間距比例：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#1a73e8',
},
spacing: {
'128': '32rem',
}
},
},
plugins: [],
}設定好之後，你就可以用 .text-brand-primary 同埋 .p-128 咁樣嘅類啦。
提取組件同使用指令
為咗避免喺 HTML 度重複寫相同嘅類組合，Tailwind 鼓勵用 @apply 指令將常用嘅實用類提取到 CSS 元件類度。
/* 在你的 CSS 文件中 */
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
}跟住，喺 HTML 度直接使用呢個自訂嘅類名：<button class="btn-primary">保存</button>。呢樣既保持咗 Tailwind 嘅效用優先原則，又實現咗 DRY（唔好重複自己）。
摘要
Tailwind CSS 透過佢獨特嘅效用優先方法論，徹底改變咗前端開發者寫樣式嘅方式。佢將樣式構造從傳統嘅 CSS 檔案轉移咗去 HTML 標記度，透過組合大量細粒度嘅、受設計系統約束嘅實用類，實現咗開發速度同設計靈活性嘅完美平衡。從簡單嘅 CDN 引入到複雜嘅項目集成，從基礎嘅佈局類到高級嘅狀態變體同深度定制，Tailwind 提供咗一套完整、高效且可擴展嘅工具集。掌握 Tailwind CSS，意味住你能夠用更少嘅代碼、更快嘅速度構建出高度定制化且保持一致嘅現代用戶界面，從而顯著提升前端開發效率同團隊協作嘅流暢度。
常見問題
Tailwind CSS 嘅樣式檔案體積會唔會好大？
唔會。呢個正係 Tailwind 嘅核心優勢之一。喺生產構建階段，Tailwind 會透過 PurgeCSS（喺 v3.0 及之後版本中稱為「內容掃描」）技術，智能地分析你嘅項目檔案（例如 HTML、JSX、Vue 模板），並只保留嗰啲實際被使用到嘅 CSS 類，最終生成一個極細嘅、優化過嘅 CSS 檔案。未使用嘅樣式會被完全移除，從而保證咗最終產出嘅檔案體積最小化。
喺 HTML 寫咁多類名，啲 code 會唔會好難睇同維護？
初頭可能會有呢個擔心，但係實踐證明通常都係習慣問題。同將啲 style 分散喺獨立嘅 CSS 檔案相比，將 style 直接寫喺 HTML 元素上面反而令元素嘅最終外觀一清二楚，唔使喺唔同檔案之間跳來跳去搵。對於複雜嘅類組合，可以用 @apply 指令提取成有語義嘅組件類，或者將重複嘅段落拆成可以重用嘅模板組件（例如喺 React、Vue 入面）。良好嘅組件化實踐可以好好咁解決維護性問題。
Tailwind CSS 同傳統嘅 Bootstrap 等框架有咩分別？
兩者嘅核心理念唔同。Bootstrap 提供嘅係預製、完整嘅組件（例如導航欄、卡片、彈出框），你主要透過修改預定義嘅 CSS 變數或者覆蓋樣式嚟定制。而 Tailwind 就唔提供任何有固定樣式嘅組件，佢提供嘅係構建組件所需嘅「原材料」（原子類）。所以，Tailwind 提供極高嘅定制自由度，唔會受到預設組件樣式嘅限制，更容易打造獨一無二嘅品牌化設計。Bootstrap 適合需要快速搭建標準管理後台嘅場景，而 Tailwind 就更適合對設計有較高定制要求嘅現代應用開發。
點樣為 Tailwind 加自訂嘅 CSS？
有幾種標準方式。最推薦嘅係使用 @layer 指令喺 Tailwind 嘅基礎（base）、組件（components）同工具（utilities）層中加入自定義樣式，咁樣可以確保你嘅樣式同 Tailwind 嘅生成規則正確合併。例如，@layer components { ... }。你亦都可以直接編寫普通嘅 CSS 規則，只需要確保你嘅自定義 CSS 檔案喺 Tailwind 指令之後匯入，以便必要時進行覆蓋。對於簡單嘅數值，最佳實踐係喺 tailwind.config.js 的 theme.extend 入面進行配置。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。