什麼係 Tailwind CSS？畀 App 建構者嘅淺白指南
Tailwind CSS 係一個用嚟設計網站樣式嘅工具包。你唔使將樣式規則寫喺另一個獨立檔案入面，而係俾每個元素加上短嘅現成類別名稱：bg-white 係白色背景，p-4 係內距，text-lg 係較大嘅文字，rounded-xl 係圓角。然後 Tailwind 會生成瀏覽器需要嘅 CSS。佢免費、開源，亦係現代網頁 App 最常用嘅樣式方法之一。
用 AI 建構時點解 Tailwind 重要
如果你用 AI App 建構工具建 web App，你嘅 App 好有可能係用 Tailwind 設計樣式。例如 Mythex 開新項目時，預設會用 Vite + React + TypeScript + Tailwind，除非你另外要求（點樣揀技術）。
咁對你有三方面嘅影響：
- 改設計好方便。 因為樣式就放喺每個按鈕、卡片同標題旁邊，AI 只需要喺一個位置改幾個類別名稱，就可以跟從「令卡片唔咁擠逼」嘅指示。
- 睇得明。 Tailwind 類別好似平常文字。
text-center font-bold text-2xl就算你從來冇寫過代碼，都唔難睇懂。 - 外觀保持統一。 Tailwind 有一套固定嘅尺寸、間距同顏色標準。咁樣 App 就唔會出現 14 種只係稍為唔同嘅灰色。
日常比喻
諗吓裝修一間屋。
純 CSS 就好似每幅牆都自己調色。你有絕對自由，但過咗一段時間，客廳係「暖白」，走廊係「微暖白」，而冇人記得點解要咁。
Tailwind 就好似油漆店嘅色卡，加上一套有標籤嘅貼紙。每幅牆都貼一張貼紙，寫住「白色、啞光、兩層」，而色卡只提供一套精心挑選嘅色調。你失去少少自由，但工地上每個人只要睇下貼紙，就知道每幅牆應該係乜樣。
Tailwind 點運作
網頁由 HTML（內容同結構）同 CSS（外觀）組成。一般嚟講，CSS 會放喺獨立檔案，寫成咁嘅規則：
.card {
background: white;
padding: 1rem;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
用 Tailwind 嘅話，你就唔使寫呢條規則，而係直接將工具類別放喺元素上：
<div class="bg-white p-4 rounded-xl shadow-sm">
Your booking is confirmed
</div>
每個類別只負責一樣細嘅工作。App 建構時，Tailwind 會掃描你嘅檔案，搵出你實際用咗嘅類別，然後只生成嗰啲 CSS。咁樣最終嘅樣式表就會保持細細個。
Tailwind 第 4 版係目前嘅主要版本，設定好簡單：安裝佢，喺你嘅建構工具加入佢嘅插件，然後喺 CSS 檔案頂部加上 @import "tailwindcss";。品牌顏色同字型等自訂內容，會以 CSS 嘅設計 token 形式定義，唔似舊版要用一個龐大嘅 JavaScript 設定檔。如果你讀緊提到 tailwind.config.js 嘅舊教學，就係因為咁。
實際例子：一張價錢卡
假設你要求 AI 建構工具做一個價錢頁，並且想「Pro」卡片突出少少。呢張卡片嘅代碼可能係咁樣（喺 React 元件入面，class 要寫成 className）：
<div className="rounded-2xl border border-gray-200 p-6">
<h3 className="text-lg font-semibold">Pro</h3>
<p className="mt-2 text-4xl font-bold">$25</p>
<button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
Start trial
</button>
</div>
由左到右睇：
| 類別 | 作用 |
|---|---|
rounded-2xl | 大圓角 |
border border-gray-200 | 幼細嘅淺灰色邊框 |
p-6 | 卡片內嘅內距 |
text-lg font-semibold | 稍大、半粗體嘅標題 |
mt-2、mt-6 | 元素上方嘅間距（「margin-top」） |
w-full | 佔滿卡片嘅闊度 |
bg-gray-900 text-white | 深色按鈕配白色文字 |
如果你要求「令 Pro 卡片用藍色邊框同淡淡嘅陰影，突出少少」，AI 可能會將 border-gray-200 改成 border-2 border-blue-600，再加上 shadow-lg。咁就係成個改動。
響應式設計同深色模式
Tailwind 有一啲短嘅前綴，用嚟處理螢幕大小同狀態：
md:grid-cols-3：喺中型或以上嘅螢幕顯示三欄；手機上則套用預設嘅單欄。Tailwind 係手機優先：冇前綴嘅類別喺所有地方生效，前綴則係為大螢幕加上改動。hover:bg-gray-700：滑鼠移到按鈕上時，按鈕變得深啲。dark:bg-gray-900：開啟深色模式時，用另一個背景色。
所以喺 Tailwind 項目入面，要求手機響應式佈局或深色模式通常都好快完成。
常用術語
| 術語 | 意思 |
|---|---|
| CSS | 層疊樣式表（Cascading Style Sheets），瀏覽器用嚟控制佈局、顏色、字型同間距嘅語言。 |
| 工具類別（Utility class） | 只負責一項細樣式工作嘅類別，例如 p-4 或 text-center。 |
| 工具優先（Utility-first） | Tailwind 嘅方法：主要用工具類別設計樣式，而唔係寫自訂 CSS 規則。 |
| 斷點（Breakpoint） | 佈局會改變嘅螢幕闊度，例如 sm、md、lg。 |
| 設計 token／主題（Design tokens / theme） | 你定義嘅命名顏色、字型同尺寸，例如 brand 顏色，然後到處重用。 |
| 元件庫（Component library） | 預先建好嘅按鈕、對話框同選單。好多元件庫，例如 shadcn/ui，都用 Tailwind 設計樣式。 |
常見誤解
- 「Tailwind 就係一種設計。」 唔係。Tailwind 提供嘅係建構模組，而唔係一種外觀。兩個用 Tailwind 嘅網站可以完全唔同。所謂嘅「AI App 外觀」來自預設值，而唔係 Tailwind 本身，所以要畀你嘅建構工具真正嘅方向。參閱點樣用 AI 設計一個好睇嘅 App。
- 「等同 inline 樣式。」 唔完全係。類別來自一套共用嘅標準，支援 hover、深色模式同斷點，並且喺建構時轉換成普通 CSS。
- 「用 Tailwind 會令頁面好大件。」 建構只會包含你用到嘅類別，所以俾訪客下載嘅 CSS 通常都好細。
- 「類別一長串，代碼就好亂。」 初看係有啲迫，但一個元素嘅外觀全部集中喺一個位置。重複嘅設計通常會抽成元件，例如一個
Button。 - 「用咗 Tailwind 就唔可以寫自訂 CSS。」 你仍然可以喺需要時寫普通 CSS。
要問 AI 建構工具嘅嘢
- 「將品牌顏色同字型定義一次，成為主題 token，然後到處使用，唔好硬寫顏色值。」
- 「令每張卡片、按鈕同輸入框都用同一樣嘅圓角同間距。」
- 「喺手機闊度檢查佈局，修正任何溢出或者太細、難以點按嘅位置。」
- 「用 Tailwind 嘅
dark:變體加入深色模式，並確保文字對比度仍然易讀。」 - 「將重複嘅按鈕樣式抽成一個可重用嘅 Button 元件。」
- 「用平白嘅語言解釋呢個部分嘅 Tailwind 類別。」
Mythex 入面嘅 Tailwind
Mythex 新項目預設同 React 同 TypeScript 一齊用 Tailwind，所以你可以用平常嘅字句要求視覺改動，然後喺即時 Preview 入面睇到效果。如果你想睇代碼，代碼編輯器會顯示每個類別（Free 係唯讀，Pro 可以編輯）。如果你鍾意純 CSS，或者想用另一種設定，請喺第一個提示入面講明；docs 解釋咗點樣揀技術棧。
常見問題
簡單嚟講，什麼係 Tailwind CSS？
Tailwind CSS 係一個網站設計工具包。你唔使寫獨立嘅樣式規則，只要用短嘅類別名稱，例如 bg-white、p-4 或 text-lg，去描述每個元素嘅外觀，Tailwind 就會將佢哋轉換成瀏覽器需要嘅 CSS。
Tailwind CSS 係咪免費？
係。Tailwind CSS 本身係免費嘅開源軟件，採用 MIT 授權。背後嘅公司亦會賣一啲可選嘅付費產品，例如現成嘅 UI 元件套件，但用 Tailwind 唔需要買呢啲嘢。
Tailwind CSS 係咪好過純 CSS？
唔可以話邊個每次都更好。Tailwind 底層都係 CSS；佢提供一套統一嘅尺寸、顏色同間距，並且將樣式放喺標記旁邊，令建構同修改介面更快。純 CSS 可以完全自由發揮，但喺大型項目入面，比較容易變得唔統一。
點解 AI 生成嘅代碼咁常用 Tailwind？
Tailwind 類別直接放喺元件代碼入面，所以 AI 只需要改一個檔案，就可以改變嘢嘅外觀，唔使喺多個獨立樣式表之間搵嚟搵去。而且佢用得好廣泛，所以模型見過好多例子。
用 AI 建 App 要唔要識 Tailwind？
唔使。你可以用平常嘅字句描述想要嘅外觀。識得幾個類別名稱，就可以幫你睇明代碼、自己做啲細微調整，並且俾更準確嘅指示。