【Tailwind CSS 教學】#01 為什麼選擇 Tailwind CSS？認識 Utility-First CSS

測驗：為什麼選擇 Tailwind CSS？

共 5 題，點選答案後會立即顯示結果

1. 什麼是 Utility-First CSS 的核心概念？

  • A. 把所有樣式寫在一個大型 CSS 檔案裡
  • B. 直接在 HTML 上用小型 class 組合出樣式
  • C. 使用 JavaScript 動態產生樣式
  • D. 透過預處理器編譯 SASS/SCSS

2. 以下哪個是傳統 CSS 開發的常見痛點？

  • A. 瀏覽器不支援 CSS
  • B. CSS 載入速度太慢
  • C. 難以想出好的 class 命名，且 CSS 檔案容易膨脹
  • D. 無法實現動畫效果

3. 在 Tailwind CSS 中，p-4 這個 class 代表什麼？

  • A. padding: 1rem（四邊留白 16px）
  • B. position: relative 加上 4px 偏移
  • C. 段落文字大小為 4 級
  • D. 四個欄位的格線佈局

4. Tailwind CSS 與 Bootstrap 的主要差異是什麼？

  • A. Tailwind 不支援響應式設計
  • B. Bootstrap 提供預設元件樣式，Tailwind 提供基礎工具讓你自己組合
  • C. Bootstrap 只能用於 React，Tailwind 只能用於 Vue
  • D. Tailwind 需要寫 JavaScript，Bootstrap 不用

5. 以下哪種情況最適合使用 Tailwind CSS？

  • A. 完全不能修改 HTML 的專案
  • B. 只有一個簡單頁面的極小型專案
  • C. 有設計稿要切版且需要快速迭代的團隊專案
  • D. 不需要任何自訂樣式的專案

本文是「Tailwind CSS 教學」系列第 1 篇，共 4 篇。
難度：L2-進階

前言

你可能遇過這種情況：專案越寫越大，CSS 檔案也越來越肥。每次要改樣式，都要在 HTML 和 CSS 檔案之間跳來跳去，而且永遠想不出好的 class 名稱。

Tailwind CSS 用一種完全不同的方式解決這個問題。它叫做「Utility-First CSS」。

這篇文章會讓你理解：

  • 什麼是 Utility-First CSS
  • 傳統 CSS 方法的痛點
  • Tailwind CSS 跟其他方案的差異
  • 什麼專案適合用 Tailwind

什麼是 Utility-First CSS？

一句話說明

直接在 HTML 上用小型 class 組合出樣式，不用另外寫 CSS。

最小範例

<!-- 傳統 CSS 寫法 -->
<div class="card">Hello</div>

<style>
.card {
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
Code language: HTML, XML (xml)
<!-- Tailwind CSS 寫法 -->
<div class="p-4 bg-white rounded-lg shadow">Hello</div>
Code language: HTML, XML (xml)

逐個 class 翻譯

Tailwind class 對應的 CSS 白話翻譯
p-4 padding: 1rem 四邊留白 16px
bg-white background-color: white 白色背景
rounded-lg border-radius: 0.5rem 圓角 8px
shadow box-shadow: ... 小陰影

重點：每個 class 只做一件事，組合起來就是完整樣式。

傳統 CSS 的三大痛點

痛點 1：取名困難

/* 這個 class 該叫什麼？ */
.card { }
.card-wrapper { }
.card-container { }
.card-box { }
.user-card { }
.profile-card { }
Code language: CSS (css)

你花在想名字的時間，可能比寫樣式還久。而且團隊裡每個人的命名習慣都不同。

痛點 2：CSS 越來越肥

傳統做法會讓 CSS 檔案不斷膨脹：

/* 專案初期 */
.card { padding: 16px; }
.button { padding: 8px 16px; }

/* 三個月後 */
.card { padding: 16px; }
.card-large { padding: 24px; }
.card-small { padding: 8px; }
.button { padding: 8px 16px; }
.button-large { padding: 12px 24px; }
.nav-item { padding: 8px 16px; }  /* 跟 .button 一樣但不敢共用 */
Code language: CSS (css)

每次新需求就加新 class，但很少有人敢刪舊的，因為不知道哪裡在用。

痛點 3：改 HTML 要跳到 CSS 檔

1. 在 HTML 看到一個元素想改樣式
2. 找到它的 class 名稱
3. 切到 CSS 檔案
4. 搜尋這個 class
5. 改完再切回 HTML 確認
Code language: JavaScript (javascript)

這個流程每改一次樣式就要重複一遍。

Tailwind CSS 怎麼解決這些問題？

解法 1：不用取名

<!-- 不需要想 class 名稱 -->
<div class="p-4 bg-white rounded-lg shadow">
  <h2 class="text-lg font-bold mb-2">標題</h2>
  <p class="text-gray-600">內容</p>
</div>
Code language: HTML, XML (xml)

直接描述樣式本身，不用發明語義化名稱。

解法 2：CSS 不會膨脹

Tailwind 的 class 是固定的。p-4 就是 padding: 1rem，不會因為專案變大而改變。

而且 Tailwind 會自動掃描你的 HTML，只輸出有用到的 class，沒用到的不會出現在最終的 CSS 裡。

解法 3：不用切換檔案

樣式直接寫在 HTML 上，改完立刻看到效果。

<!-- 想讓文字大一點？直接改 -->
<h2 class="text-lg">標題</h2>
<h2 class="text-xl">標題</h2>  <!-- 改這裡就好 -->
Code language: HTML, XML (xml)

Tailwind CSS vs 其他方案

比較表

方案 命名方式 CSS 膨脹 學習曲線 適合專案
傳統 CSS 自己取名 會膨脹 低 小型專案
Bootstrap 預設元件 引入整包 低 快速原型
CSS-in-JS 不用取名 按需載入 中 React 專案
Tailwind CSS 不用取名 按需載入 中 各種專案

Tailwind vs Bootstrap

<!-- Bootstrap：用預設好的元件樣式 -->
<button class="btn btn-primary btn-lg">送出</button>

<!-- Tailwind：自己組合樣式 -->
<button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  送出
</button>
Code language: HTML, XML (xml)

差異：

  • Bootstrap 給你現成的「按鈕長這樣」
  • Tailwind 給你積木讓你自己組

什麼時候選 Bootstrap：

  • 不在乎設計是否獨特
  • 要最快有個能用的介面

什麼時候選 Tailwind：

  • 有自己的設計稿要實作
  • 需要高度客製化

Tailwind vs CSS-in-JS (styled-components)

// CSS-in-JS：樣式寫在 JS 裡
const Button = styled.button`
  padding: 12px 24px;
  background: blue;
  color: white;
`;

// Tailwind：樣式寫在 class 裡
<button className="px-6 py-3 bg-blue-500 text-white">送出</button>
Code language: JavaScript (javascript)

差異：

  • CSS-in-JS 可以用 JS 變數，適合動態樣式
  • Tailwind 不用多裝套件，純 HTML/CSS

什麼時候選 CSS-in-JS：

  • 需要大量動態樣式（根據 props 改變）
  • 團隊已經熟悉這個做法

什麼時候選 Tailwind：

  • 樣式大多是靜態的
  • 想要統一的設計規範

適用場景分析

適合用 Tailwind 的情況

情況 原因
有設計稿要切版 可以精確對應設計
團隊協作專案 統一的 class 命名
需要快速迭代 改樣式不用切檔案
想要一致的設計系統 內建間距、顏色規範

不太適合的情況

情況 原因
HTML 不能改 沒辦法加 class
極簡單的單頁 殺雞用牛刀
團隊排斥 class 太長 會有適應問題

快速體驗：你的第一個 Tailwind 元件

不用安裝，直接在 Tailwind Play 試試：

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-xl shadow-lg max-w-md">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">
      歡迎使用 Tailwind CSS
    </h1>
    <p class="text-gray-600 mb-6">
      這是你的第一個 Tailwind 元件，
      試著改改看這些 class！
    </p>
    <button class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition">
      開始學習
    </button>
  </div>
</div>
Code language: HTML, XML (xml)

試著改這些看看

想要的效果 改成
背景改深色 bg-gray-100 -> bg-gray-900
按鈕改綠色 bg-blue-500 -> bg-green-500
圓角改更圓 rounded-xl -> rounded-3xl
陰影改大 shadow-lg -> shadow-2xl

Vibe Coder 檢查點

看到 AI 寫的 Tailwind 程式碼時確認：

  • [ ] 這些 class 的效果我大概知道嗎？（不用全背，知道 p- 是 padding、m- 是 margin 就好）
  • [ ] 有沒有重複的 class 可以抽成 component？
  • [ ] 響應式設計有處理嗎？（sm:、md:、lg: 開頭的 class）

小結

這篇介紹了 Tailwind CSS 的核心概念：

  • Utility-First CSS：用小型 class 組合樣式
  • 解決的問題：命名困難、CSS 膨脹、檔案切換
  • 與其他方案的差異：比 Bootstrap 更彈性、比 CSS-in-JS 更簡單
  • 適用場景：有設計稿、團隊協作、需要快速迭代

下一篇會介紹 Tailwind CSS 的安裝與環境設定，讓你在自己的專案裡開始使用。

延伸閱讀

進階測驗：Tailwind CSS 實戰應用

測驗目標：驗證你是否能在實際情境中判斷何時使用 Tailwind CSS，以及理解其運作方式。
共 5 題，包含情境題與錯誤診斷題。

1. 你剛加入一個新團隊，PM 說：「我們有設計師給的完整設計稿，需要在兩週內切出可運作的前端，而且之後會頻繁調整樣式。」情境題

考量這個專案需求，最適合的 CSS 方案是？

  • A. 使用 Bootstrap，因為有現成元件可以快速開發
  • B. 使用傳統 CSS + BEM 命名法，確保程式碼結構清晰
  • C. 使用 Tailwind CSS，因為可以精確對應設計稿且快速調整樣式
  • D. 使用 CSS-in-JS，因為可以動態產生樣式

2. 你正在維護一個三年前建立的專案，CSS 檔案已經有 5000 行，而且沒人敢刪任何 class，因為不確定哪裡在用。情境題

如果要重構這個專案的樣式架構，Tailwind CSS 能解決的核心問題是？

  • A. 自動把現有 CSS 轉換成 Tailwind class
  • B. class 定義是固定的，且只輸出有用到的樣式，不會持續膨脹
  • C. 提供 JavaScript 框架來管理樣式狀態
  • D. 內建 CSS 壓縮工具減少檔案大小

3. 新同事看到你的 Tailwind 程式碼後說：「這跟 inline style 有什麼差別？都是把樣式直接寫在 HTML 上，這樣不是很亂嗎？」錯誤診斷

這個說法有什麼問題？

  • A. 完全正確，Tailwind 就是換個寫法的 inline style
  • B. Tailwind 可以做到響應式設計，但 inline style 不行，其他都一樣
  • C. Tailwind 只是把 CSS 壓縮，本質上還是 inline style
  • D. Tailwind 提供設計規範約束、支援響應式/hover 狀態，且有一致的命名系統，跟 inline style 本質不同

4. 客戶說：「我們用的是第三方 CMS，HTML 結構是固定的，沒辦法加自訂的 class。」情境題

面對這個情況，你應該建議？

  • A. 強烈推薦 Tailwind，因為它是最現代的 CSS 框架
  • B. 這種情況不太適合 Tailwind，建議使用傳統 CSS 搭配選擇器
  • C. 用 JavaScript 動態注入 Tailwind class
  • D. 要求客戶更換 CMS 系統

5. 看到以下 Tailwind 程式碼，身為 Vibe Coder 應該確認什麼？錯誤診斷

<div class=”p-4 bg-white rounded-lg shadow”> <h2 class=”text-lg font-bold mb-2″>標題</h2> <p class=”text-gray-600″>內容</p> </div> <div class=”p-4 bg-white rounded-lg shadow”> <h2 class=”text-lg font-bold mb-2″>另一個標題</h2> <p class=”text-gray-600″>另一段內容</p> </div>

這段程式碼最該注意的問題是？

  • A. class 名稱太長，應該縮短
  • B. 沒有使用 CSS Grid 佈局
  • C. 有重複的 class 組合，可以考慮抽成 component
  • D. 缺少響應式設計的 sm:/md: 前綴
標籤

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *