---
# System prepended metadata

title: Tailwind CSS 概述
tags: [GDG 前端技術講座]

---

<center><img src="https://blog.nashtechglobal.com/wp-content/uploads/2025/08/O-que-e-Tailwind-CSS-e-por-que-ele-virou-tendencia-no-front-end_-Programadores-Depre-Programacao-e-Tecnologia.jpeg" /></center>

前言
---
我們在寫網頁切版的時候，最常接觸到的就是 CSS。 一般來講，我們可能會這樣寫：

* 先在 HTML 中寫一個結構：
```html=
<div class="user-profile-card">
    <img src="..." alt="..." class="profile-avatar">
    <h3 class="user-name">Gemini</h3>
    <p class="user-bio">一個由 Google 打造的 AI 助手...</p>
    <button class="follow-button">Follow</button>
</div>
```

* 跳到 <code>.css</code> 檔案，開始定義每個 class：
```CSS
.user-profile-card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 9999px; /* 圓形 */
}
.user-name {
    font-size: 1.25rem;
    font-weight: 600; /* 粗體 */
}
.follow-button {
    background-color: #3b82f6; /* 藍色 */
    color: white;
    padding: 8px 16px;
}
.follow-button:hover {
    background-color: #2563eb; /* 深一點的藍色 */
}
```

**這樣子寫的話會遇到幾個 「痛點」：**
* **命名地獄：** 你要花很多時間去想 class 名字 (`.user-profile-card`, `.follow-button-primary`...)。當專案變大，命名衝突和管理就變成一場惡夢。
* **檔案切換：** 你必須不斷在 HTML 和 CSS 兩個檔案之間來回切換，打斷心流。
* **CSS 檔案膨脹：** 你寫了很多 CSS，但時間一久，你根本不敢刪掉舊的 class，因為你不確定刪掉它會不會弄壞網站的其他地方。
* **一致性問題：** A 頁面的按鈕 `padding` 是 `8px`，B 頁面可能是 `10px`。A 頁面的卡片陰影是 `0.1`，B 頁面是 `0.15`。設計風格很難統一。

**Tailwind CSS 就是為了解決這些問題而生的。**

它不是要你 _取代_ CSS，而是提供一種 _不同_ 的方式來 _使用_ CSS。
它提供給你一大堆「**工具**」，讓你直接在 HTML 裡「**組合**」出你想要的樣子。

核心概念 (一) - Utility-First (工具優先)
---
* 這是 Tailwind 最核心的概念。它不提供像是 BootStrap(UI 庫) 預先做好的元件（像 `Card` 或 `Button`）。
* 相反地，它提供的是「**單一用途的工具 class**」。
* 例如：
    * `p-4` 代表 `padding: 16px;` (1rem)
    * `bg-white` 代表 `background-color: white;`
    * `rounded-lg` 代表 `border-radius: 8px;`
    * `shadow-md` 代表 `box-shadow: (某個中等陰影值);`
    * `text-xl` 代表 `font-size: 1.25rem;`
    * `font-bold` 代表 `font-weight: 700;`
* 所以，前面那個卡片用 Tailwind 寫，會變成這樣：
```html=
<div class="bg-white rounded-lg p-4 shadow-md">
    <img src="..." alt="..." class="w-12 h-12 rounded-full">
    <h3 class="text-xl font-bold">Gemini</h3>
    <p class="text-gray-600">一個由 Google 打造的 AI 助手...</p>
    <button class="bg-blue-500 text-white py-2 px-4 rounded">Follow</button>
</div>
```
* **優點：** 你不用再想 class 名字，也不用切換檔案。所有的樣式都在 HTML 裡，一目了然。

核心概念 (二) - Mobile-First (行動優先的響應式設計)
---
我們會去用不同的裝置去瀏覽網頁，常見的像是用手機、平板與電腦。而因為這三種裝置的螢幕大小不同，我們需要網頁有 **RWD (響應式設計的功能)**，而實現這個功能，如果使用傳統的 CSS 去實現的話，會使檔案變得非常巨大。
* Tailwind 預設的樣式是給手機看的。如果你想在「平板」或「電腦」上改變樣式，你只要加上「前綴」 (Prefix)。
* 例如：`sm:` (小螢幕), `md:` (中螢幕), `lg:` (大螢幕), `xl:` (超大螢幕)。
* **範例：** 一個區塊，在手機上是「寬度 100%」，但在中等螢幕(md)以上，變成「寬度 50%」。
```html=
<!-- 在手機上是寬度 100%，螢幕尺寸超過 md (中等螢幕) 以上，變成寬度 50% -->
<div class="w-full md:w-1/2"> 
     ...
</div>
```
**範例：** 手機上文字置中，電腦上文字靠左。
```html=
<div class="text-center lg:text-left">
     ...
</div>
```

核心概念 (三) - State Variants (狀態變化)
---
* 像是 `hover` (滑鼠懸停)、`focus` (選取)、`disabled` (禁用) 等狀態，也可以用「前綴」輕易做到。
* **範例：** 一個按鈕，平常是藍色，滑鼠移上去 (hover) 變成深藍色。
```html=
<button class="bg-blue-500 hover:bg-blue-700 text-white ...">
    Click me
</button>
```

核心概念 (四) - JIT (Just-In-Time) Engine
---
看到這邊有人可能會問：「哇，那這樣 Tailwind CSS 提供幾千個 class，我的 CSS 檔案會不會大到爆啊?」

其實並不會。

JIT 引擎會去掃描我們所有的 HTML 與 JS 檔案，然後找出我們「真正有用到」的 class。
像是我如果只用到 <code>p-4</code>，那它就只會把這個 class 生成到最終的 CSS 檔案中，所以其實最後的 CSS 檔案通常都蠻小的。

核心概念 (五) - Design System (可客製化的設計系統)
---
* Tailwind 已經幫你定義好一套「設計系統」。
* 例如 `p-1` (4px), `p-2` (8px), `p-3` (12px), `p-4` (16px)... 它的間距是有規律的。
* 它的顏色 `blue-100` (最淺), `blue-500` (中等), `blue-900` (最深) 也是配好的。
* 這強迫團隊在開發時使用「**一致**」的間距和顏色，讓網站風格更統一。
* (進階) 如果你需要客製化（例如公司的主色是 `#FF6600`），你都可以在 `tailwind.config.js` 檔案中輕鬆設定。

---
參考文件：https://tailwindcss.com/docs/installation/using-vite