什麼是 Tailwind CSS？給應用程式建置者的白話指南

Tailwind CSS 是用於設計網站樣式的工具組。你不必在獨立的檔案中撰寫樣式規則，而是為每個元素加上簡短、現成的 class 名稱：bg-white 代表白色背景、p-4 代表內距、text-lg 代表較大的文字、rounded-xl 代表圓角，然後 Tailwind 會產生瀏覽器需要的 CSS。它是免費的開放原始碼，也是現代網頁應用程式最常見的樣式方式之一。

為什麼用 AI 建置時要了解 Tailwind

如果你使用 AI 應用程式建置工具來開發網頁應用程式，你的應用程式很可能是以 Tailwind 設計樣式的。以 Mythex 為例，除非你另外指定，新專案預設使用 Vite + React + TypeScript + Tailwind （技術選擇的方式）。

這對你有三方面的影響：

• 設計調整成本低。 因為樣式就緊挨著每個按鈕、卡片和標題，AI 可以在一處修改幾個 class 名稱，來實現「讓卡片不要那麼擁擠」這類要求。
• 你看得懂。 Tailwind 的 class 很接近白話英文。即使你從沒寫過程式，text-center font-bold text-2xl 也不難理解。
• 外觀保持一致。 Tailwind 提供固定的尺寸、間距和顏色級距，可以避免應用程式出現 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 時，你不必撰寫那條規則，而是直接把工具型 class 放在元素上：

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

每個 class 只負責一項小工作。應用程式建置時，Tailwind 會掃描你的檔案，找出實際使用到的 class，只產生這些 class 的 CSS。這樣最終的樣式表會保持小巧。

目前的主要版本 Tailwind 4 只需要很少的設定：安裝後，把它的外掛加入建置工具，並在 CSS 檔案頂端加上 @import "tailwindcss";。品牌顏色和字型等自訂內容，會以設計權杖（design tokens）的形式在 CSS 中定義，而不是像舊版本那樣寫在龐大的 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>

由左至右閱讀：

如果你說「讓 Pro 卡片用藍色邊框和淡淡的陰影來突顯」，AI 可能會把 border-gray-200 改成 border-2 border-blue-600，並加上 shadow-lg。整個改動就是這些。

響應式設計與深色模式

Tailwind 為螢幕尺寸和狀態提供簡短的前綴：

• md:grid-cols-3：在中型螢幕以上顯示三欄；在手機上則套用預設的單欄。Tailwind 採用行動裝置優先：沒有前綴的 class 適用於所有螢幕，有前綴的 class 則為較大的螢幕加上變化。
• hover:bg-gray-700：滑鼠移到按鈕上時，按鈕變成較深的顏色。
• dark:bg-gray-900：開啟深色模式時使用不同的背景。

這就是為什麼在 Tailwind 專案中，要求行動裝置響應式版面或深色模式通常很快就能完成。

關鍵術語

常見迷思

• 「Tailwind 就是一種設計風格。」 並不是。Tailwind 提供的是建構積木，而不是固定的外觀。兩個使用 Tailwind 的網站可以看起來完全不同。常見的「AI 應用程式風格」來自預設值，而非 Tailwind 本身，所以請給建置工具明確的設計方向。參見如何用 AI 設計美觀的應用程式。
• 「這和行內樣式一樣。」 不完全相同。Class 來自共用的級距，支援滑鼠懸停、深色模式和斷點，並會在建置時轉換成一般的 CSS。
• 「Tailwind 會讓頁面變得很肥大。」 建置時只會包含你實際使用的 class，所以提供給訪客的 CSS 通常很小。
• 「class 很長代表程式碼很亂。」 一開始看起來可能很雜，但元素的所有外觀都集中在同一處。重複的模式通常會被抽成元件，例如單一的 Button。
• 「用了 Tailwind 就不能寫自訂 CSS。」 你仍然可以在需要時撰寫一般的 CSS。

向 AI 建置工具提出的要求

• 「把品牌顏色和字型定義一次，作為主題權杖，並在各處使用，不要寫死顏色。」
• 「讓每張卡片、按鈕和輸入框都使用相同的圓角與間距。」
• 「以手機寬度檢查版面，修正任何溢出或太小而難以點擊的地方。」
• 「使用 Tailwind 的 dark: 變體加入深色模式，並確保文字對比度仍然清楚易讀。」
• 「把重複的按鈕樣式抽成一個可重複使用的 Button 元件。」
• 「用白話解釋這個區塊上的 Tailwind class。」

Mythex 中的 Tailwind

新的 Mythex 專案預設會搭配 React 與 TypeScript 使用 Tailwind，因此你可以用白話要求視覺調整，並在即時預覽中看到結果。如果你想看程式碼，程式碼編輯器會顯示每個 class（免費版為唯讀，Pro 版可編輯）。如果你偏好原生 CSS 或其他設定，請在第一則提示中說明 — 文件說明了技術堆疊的選擇方式。

常見問題