乜嘢係 Tailwind CSS 同埋佢嘅核心哲學
Tailwind CSS 係一個功能優先嘅 CSS 框架，佢提供咗一系列低階、可組合嘅實用工具類，等開發者可以直接喺 HTML 度快速構建自訂設計。同 Bootstrap 或者 Material-UI 呢類提供預設組件（例如按鈕、卡片）嘅框架唔同，Tailwind 唔提供任何有固定樣式嘅組件，而係提供細微、單一職責嘅類，好似 text-center、p-4、bg-blue-500 等。開發者透過組合呢啲類嚟「砌」出自己想要嘅介面。
佢嘅核心哲學係「實用優先」。即係話你唔使再為咗一個簡單嘅樣式而離開 HTML 檔案去寫自訂嘅 CSS，亦唔使為點樣命名一個只係用嚟調整邊距嘅 CSS 類而煩惱。呢種工作方式大大加快咗原型設計同開發流程，同時保持 CSS 包體積嘅可控性，因為透過佢內置嘅 PurgeCSS（而家叫做「內容掃描」）功能，可以自動移除所有冇用過嘅樣式，最後生成一個極細嘅生產環境 CSS 檔案。
掌握核心實用工具類
要用 Tailwind CSS 做到高效，首先就要熟習佢嗰套龐大而有系統嘅工具類命名體系。呢啲類跟住一套一致嘅約定，令學習同記憶變得有規律可循。
推薦閱讀 Tailwind CSS 終極指南：從入門到精通實用技巧。
佈局同間距類
佈局類控制元素嘅顯示方式、定位同盒模型。最常用嘅包括 flex、grid、block、inline-block、hidden 等。間距類就用嚟控制內邊距（padding）同外邊距（margin），佢嘅命名規則好直觀：p-{size} 代表 padding，m-{size} 代表 margin。方向透過 t（頂部）、r（右邊）、b（底部）、l（左邊）、x（水平）、y（垂直）嚟指定。例如，mt-4 表示 margin-top: 1rem，px-2 表示左右內邊距各為 0.5rem。
<div class="flex justify-between items-center p-6">
<h1 class="text-xl">標題</h1>
<button class="px-4 py-2 bg-blue-600 text-white rounded">按鈕</button>
</div>顏色同排版類
顏色類涵蓋咗文字顏色、背景顏色、邊框顏色等。佢哋用數字系統嚟定義顏色深淺，例如 text-gray-800、bg-red-100、border-green-300。排版類就用嚟控制字體大細、粗幼、對齊同埋行高等等。例如，text-2xl 設定字體大細，font-bold 設定字體加粗，text-center 設定文字置中，leading-relaxed 設定行高。
呢套系統化嘅命名令到樣式調整好似砌積木咁簡單，你唔使記住具體嘅像素值或者十六進制顏色碼，只要記住語義化嘅類名就得喇。
實現現代響應式設計
Tailwind CSS 嘅響應式設計功能係佢最強勁嘅特性之一。佢採用「移動優先」嘅策略，即係話你首先為流動裝置設計樣式，然後用斷點前綴喺更大嘅屏幕上進行覆蓋調整。
使用斷點前綴
Tailwind 預設咗五個常用嘅斷點：sm （640px）、md （768px）、lg （1024px）、xl （1280px）同 2xl (1536px)。喺工具類前面加斷點前綴，就可以指定呢個樣式喺特定屏幕寬度同以上生效。例如，text-sm md:text-lg 表示喺移動設備上用細字體，喺中等屏幕同以上用大字體。
推薦閱讀 Tailwind CSS 終極指南：由入門到精通現代網頁開發。
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<!-- 在移动设备上宽度100%，中等屏幕50%，大屏幕33% -->
響應式闊度卡片
</div>懸停、焦點等狀態變體
除咗響應式斷點，Tailwind 仲提供咗狀態變體前綴，用嚟處理元素嘅互動狀態。常用嘅有 hover:、focus:、active:、disabled: 等。咁樣令到為按鈕、連結同表單元素加互動反饋變得異常簡單。
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 text-white font-bold py-2 px-4 rounded transition duration-150">
交互按钮
</button>通過組合響應式前綴同狀態前綴，你可以用極少嘅代碼構建出高度動態同自適應嘅用戶界面，而唔使寫任何自定義嘅媒體查詢或者複雜嘅CSS選擇器。
高級配置同自訂
雖然Tailwind開箱即用，但為咗令佢完全融入你嘅設計系統，進行自定義配置係必不可少嘅一步。呢個主要通過修改項目根目錄下嘅 tailwind.config.js 設定檔嚟實現。
擴展同覆蓋設計令牌
喺設定檔嘅 theme 部分，你可以擴展或者覆蓋默認嘅主題設置，即係「設計令牌」。呢啲包括顏色、字體、間距、斷點、邊框圓角等等。例如，你可以加入品牌色或者調整默認嘅間距比例。
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#1a73e8',
},
spacing: {
'128': '32rem',
}
},
},
}配置之後，你就可以直接用 bg-brand-primary 或 h-128 噉樣嘅類名喇。
創建可重用嘅組件類
雖然Tailwind鼓勵直接喺HTML入面用工具類，但對於喺項目度頻繁出現嘅複雜組件，重複寫一長串類名會降低可維護性。呢個時候，有幾種解決方案：
1. 使用 @apply 指令：在自定义 CSS 文件中，使用 @apply 將一連串工具類別提取到一個新嘅類別入面。
推薦閱讀 精通 Tailwind CSS：從入門到實戰嘅實用指南同最佳實踐。
.btn-primary {
@apply py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
}2. 使用 JavaScript 框架的组件系统：在 React、Vue 等框架中，将带有 Tailwind 类名的元素封装成可复用的组件。
3. 使用编辑器片段：通过编辑器的代码片段功能来快速生成重复的类名组合。
揀邊種方法，要睇返個項目有幾複雜同埋團隊鍾意點做。對大部分項目嚟講，混合使用上面講嘅方法係最好嘅做法。
摘要
Tailwind CSS 透過佢「實用優先」嘅模式，徹底改變咗前端開發者寫樣式嘅方式。佢提供咗一整套可以自由組合嘅低階工具類別，令開發者唔使再煩惱點樣命名 CSS 同埋成日要轉檔案，大大提升咗開發效率。佢內置嘅響應式設計同狀態變體系統，令到構建現代、自適應嘅介面變得直接同高效。透過深度自訂 tailwind.config.js 檔案，佢可以完美噉配合任何設計系統。雖然初頭要記啲類別名，但係一旦掌握咗佢嘅命名規律，佢就會變成構建美觀、一致同高效能用戶介面嘅強大工具。
常見問題
Tailwind CSS 會令到 HTML 變得臃腫嗎？
冇錯，用咗 Tailwind CSS 之後，HTML 元素上面嘅類別名會明顯多咗，咁樣可能會令個模板睇落有啲亂。
不過，呢種「腫脹」係一種取捨。佢將樣式邏輯由 CSS 檔案搬去 HTML 模板度，令到元件嘅樣式依賴變得完全明顯同自包含，呢樣嘢實際上提升咗程式碼嘅可讀性同可維護性，尤其喺元件化框架入面。另外，透過 PurgeCSS 嘅優化，最終生成嘅 CSS 檔案體積通常細過傳統手寫或者用大型元件庫嘅 CSS，所以帶嚟更好嘅效能。
點樣為 Tailwind 加自訂嘅 CSS？
你可以喺項目嘅全域 CSS 檔案（例如 styles.css）入面加自訂 CSS。對於需要重用工具類組合嘅情況，建議用 @apply 指令。對於完全自訂嘅樣式，你可以直接編寫標準嘅 CSS。確保喺檔案中正確引入 Tailwind 嘅基礎層、組件層同工具層。
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.custom-card {
@apply p-6 bg-white rounded-xl shadow-lg;
}
}
/* 纯自定义样式 */
.special-gradient {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}Tailwind 適合同邊啲框架或者技術一齊使用？
Tailwind CSS 係框架無關嘅，可以同任何能夠使用 HTML 同 CSS 嘅技術堆疊完美搭配。
佢尤其流行於現代 JavaScript 框架中，例如 React、Vue.js、Angular、Svelte 同 Next.js。喺呢啲框架嘅組件模型中，Tailwind 嘅實用類可以好好咁同組件封裝結合，創建出樣式同結構緊密耦合嘅可重用 UI 組件。佢亦都同靜態網站生成器（例如 Gatsby、Hugo、Jekyll）同後端模板引擎（例如 Laravel Blade、Django Templates）協作得好。
喺生產環境入面，點樣優化 Tailwind CSS 嘅體積？
Tailwind CSS 透過佢內置嘅「內容掃描」功能（由 PurgeCSS 驅動）嚟優化生產構建體積。
在 tailwind.config.js 設定檔嘅 content 部分，你需要正確指定所有包含 Tailwind 類名嘅模板檔案路徑。喺構建生產版本嗰陣，Tailwind 會掃描呢啲檔案，搵出所有被使用嘅工具類，並自動從最終嘅 CSS 檔案入面移除所有未使用嘅樣式。呢個係 Tailwind 能夠保持高性能嘅關鍵，確保你只係為你實際用到嘅樣式程式碼畀錢。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。