乜嘢係 Tailwind CSS：實用優先嘅 CSS 框架
Tailwind CSS 係一種「功能類優先」嘅 CSS 框架，佢同我哋熟悉嘅 Bootstrap、Foundation 等傳統框架喺設計哲學上有根本性嘅差異。傳統框架提供一系列預製、有特定語義嘅組件類，例如 .btn、.card，開發者透過組合呢啲組件類嚟構建界面。而 Tailwind 就提供大量細粒度、單一用途嘅實用類，呢啲類直接對應單一嘅 CSS 屬性。
例如，要創建一個內邊距為 1rem、藍色背景、白色粗體文字嘅按鈕，喺 Tailwind 入面，你只需要喺 HTML 元素上添加類名 p-4 bg-blue-600 text-white font-bold。每個類名都好似原子噉，執行一個特定嘅樣式任務：p-4 設定內邊距，bg-blue-600 設定背景顏色，text-white 設置文字顏色，font-bold 設定字重。呢種方法嘅好處在於，你唔使離開HTML檔案去編寫同維護大量嘅自訂CSS，所有樣式都透過類名直接喺模板度表達，大大提升咗開發速度同保持咗樣式嘅一致性。
核心設計哲學
實用優先哲學嘅核心在於「可組合性」同「約束性」。透過提供一套預設嘅設計尺度（例如間距、顏色、字號），Tailwind 強制團隊喺設計上保持一致。開發者唔再需要為某個元素係使用 16px 定係 18px 嘅內邊距而爭拗，只需從框架提供嘅 p-4 （1rem）或者 p-5 (1.25rem) 中揀選。咁樣大大減少咗決策疲勞，同埋產生咗高度可預測、易於維護嘅樣式代碼。
推薦閱讀 Tailwind CSS 入門指南：從零開始構建現代響應式網頁。
環境搭建同基本配置
開始使用 Tailwind CSS 有好多方法，最推薦嘅係透過佢官方嘅 PostCSS 插件嚟安裝，咁樣可以最大程度咁利用佢嘅功能，例如 JIT（即時編譯）模式同 tree shaking（搖樹優化）。
首先，用 npm 或者 yarn 初始化個項目，然後安裝 Tailwind 同埋佢嘅依賴。核心嘅安裝指令係 npm install -D tailwindcss postcss autoprefixer。跟住，執行 npx tailwindcss init 嚟生成設定檔 tailwind.config.js。
在 tailwind.config.js 喺文件入面，最重要嘅配置項係 content。你需要喺呢度指定 Tailwind 應該掃描邊啲檔案嚟搵出使用咗嘅類名，咁樣喺生產構建嗰陣就可以剷走冇用嘅樣式，從而生成最細嘅 CSS 檔案。一個典型嘅 Vue 或者 React 項目配置係咁樣嘅：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}跟住，開一個主 CSS 檔案（例如 src/index.css 或 src/styles/tailwind.css），同埋加返 Tailwind 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;最後，喺你嘅構建工具（例如 Vite、Webpack）嘅配置入面，要確保 PostCSS 配置正確，同埋將呢個 CSS 檔案引入到項目入口。完成呢啲步驟之後，你就可以喺 HTML 或者組件入面開始用 Tailwind 嘅實用類啦。
推薦閱讀 Tailwind CSS 入門指南：由零開始構建現代化響應式介面。
核心實用類同響應式設計
Tailwind 嘅類庫覆蓋晒 CSS 嘅方方面面，由佈局、間距、排版到背景、邊框、特效等等。佢嘅命名系統好直觀同有規律，好易學同記。
佈局同間距系統
佈局類好似 flex, grid, block, inline-block 等，同 CSS 屬性一一對應。間距系統係基於一個預設嘅 0.25rem 倍數尺度。例如，m-4 表示 margin: 1rem，p-2 表示 padding: 0.5rem。方向用 t （上）、r （右）、b （下）、l （左）、x （水平）、y （垂直）嚟指定，例如 mt-8, px-4。
響應式設計實現
Tailwind 嘅響應式設計係佢最強大嘅特性之一。框架默認提供咗五個斷點：sm （640px），md （768px），lg （1024px），xl （1280px），2xl （1536px）。要應用響應式樣式，只需喺任何實用類前面加上斷點前綴就得。樣式會從呢個斷點開始生效，並向上層疊。
例如，以下代碼創建咗一個默認闊度全屏，喺中等屏幕以上變為容器闊度並置中嘅元素：
<div class="w-full md:max-w-2xl md:mx-auto p-4">
<!-- 内容 -->
</div>呢種「移動優先」嘅方法，即係你先為細屏幕設計樣式（冇前綴類），然後用 md:、lg: 等前綴去覆蓋或者加更大屏幕嘅樣式，令到構建複雜嘅響應式界面變得異常簡單同清晰。
高級功能：懸停、焦點同自訂
除咗基本嘅響應式，Tailwind 仲透過變體（Variants）支援狀態樣式，例如懸停、焦點、啟動等等。
推薦閱讀 Tailwind CSS 入門同實戰：由零開始建立現代化響應式網站。
狀態變體
你可以直接喺類名前面加狀態前綴嚟套用對應狀態嘅樣式。例如，hover:bg-blue-700 會喺滑鼠懸停嗰陣套用更深嘅藍色背景；focus:ring-2 focus:ring-blue-500 會喺元素獲得焦點嗰陣加個藍色環狀輪廓，呢個對於提升表單嘅可訪問性好有用。其他常用變體仲包括 active:, disabled:, group-hover:（喺父級懸停嗰陣生效）等等。
自訂主題同插件
雖然 Tailwind 提供咗豐富嘅默認設計尺度，但係你完全可以對佢進行深度定制。喺 tailwind.config.js 檔案嘅 theme.extend 部分，你可以添加、覆蓋或者刪除主題值。
例如，要添加一種品牌顏色同埋一種更大嘅間距尺度：
module.exports = {
theme: {
extend: {
colors: {
'brand': '#3a86ff',
},
spacing: {
'128': '32rem',
}
},
},
}之後，你就可以用 bg-brand 同埋 w-128 咁樣嘅類啦。另外，Tailwind 擁有一個活躍嘅插件生態系統，你可以透過安裝插件來添加新嘅實用類，例如官方提供嘅 @tailwindcss/forms 插件可以令表單元素更加美觀。
摘要
Tailwind CSS 透過其實用優先嘅方法，徹底改變咗開發者編寫同維護樣式嘅方式。佢將樣式決策從 CSS 檔案轉移到 HTML 模板中，透過一套約束性、可組合嘅原子類，實現咗極高嘅開發效率同卓越嘅設計一致性。其內置嘅響應式系統同狀態變體，令構建現代、互動式嘅網頁界面變得直觀而高效。雖然初期需要記住一啲類名，但一旦熟悉其命名模式，開發速度就會有質嘅飛躍。對於追求快速開發、團隊協作同設計系統化嘅項目嚟講，Tailwind CSS 無疑係一個極具價值嘅強大工具。
常見問題
Tailwind CSS 生成嘅 CSS 檔案會唔會好大？
唔會，呢個正係 Tailwind 嘅核心優勢之一。喺生產構建時，Tailwind 會使用 PurgeCSS（或者 JIT 引擎嘅內置優化）來嚴格掃描你嘅項目檔案，只打包實際被使用到嘅類名對應嘅 CSS。最終生成嘅 CSS 檔案通常只有幾 KB 到十幾 KB，比好多傳統框架或者手寫 CSS 項目嘅 CSS 體積要細得多。
喺團隊項目中，HTML 入面寫好多類名會唔會顯得好亂？
呢個確實係一個常見嘅顧慮。實踐表明，通過合理嘅換行同排序（可以用 Prettier 插件自動格式化），類名列表係可以保持可讀性嘅。更重要嘅係，呢種「亂」係局部嘅、明確嘅，佢避免咗傳統 CSS 中樣式定義同樣式應用分離所帶來嘅「跳轉」成本同潛在嘅全局樣式衝突。好多團隊認為，呢種顯式嘅、局部嘅「亂」比隱式嘅、全局嘅「整潔」更易於維護。
Tailwind CSS 係咪適合同組件庫（例如 React, Vue）一齊用？
非常適合，甚至可以話係絕配。喺 React 或者 Vue 組件入面，你可以將一組 Tailwind 類提取為一個可重用嘅樣式組件。例如，一個按鈕組件內部封裝咗所有必要嘅 Tailwind 類，對外就暴露簡潔嘅 props 接口。咁樣既享受咗 Tailwind 快速原型開發嘅好處，又保持咗組件級嘅抽象同重用性。同時，得益於 JIT 模式，即使類名係動態拼接嘅，Tailwind 亦都能夠正確處理。
點樣覆蓋第三方組件嘅樣式？
當使用帶有自身樣式嘅第三方 UI 組件庫嗰陣，Tailwind 嘅實用類由於其高特異性，通常可以輕易噉覆蓋組件嘅內聯樣式或者默認類。你只需要喺組件上面加返你自己嘅 Tailwind 類就得。如果遇到特異性不足嘅情況，可以用 Tailwind 嘅 !important 修飾符，喺類別名後面添加 !，例如 bg-red-500!，但呢個應該作為最後手段謹慎使用。更好嘅做法係睇吓可唔可以直接配置或者替換呢個第三方組件。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。