【Tailwind CSS 教學】#02 基礎語法：從零開始寫樣式

測驗：Tailwind CSS 基礎語法

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

1. 在 Tailwind CSS 中，text-blue-700 這個類別代表什麼意思？

  • A. 文字大小為 700px
  • B. 淺藍色文字
  • C. 深藍色文字（數字越大顏色越深）
  • D. 藍色背景

2. 如果要設定元素的左右 padding，應該使用哪個類別？

  • A. py-4
  • B. px-4
  • C. p-4
  • D. pl-4 pr-4 是唯一方法

3. 看到這段程式碼 <div class="flex justify-between items-center">，這個容器內的子元素會如何排列？

  • A. 垂直排列，置中對齊
  • B. 水平排列，全部靠左
  • C. 網格排列，平均分配
  • D. 水平排列，兩端對齊，垂直置中

4. Tailwind 的間距數值 p-4 大約等於多少像素？

  • A. 4px
  • B. 8px
  • C. 16px（數字乘以 4）
  • D. 40px

5. 要建立一個 3 欄的網格佈局，應該使用哪組類別？

  • A. flex flex-col-3
  • B. grid grid-cols-3
  • C. columns-3
  • D. flex gap-3

在上一篇文章中，我們認識了 Tailwind CSS 的 Utility-First 概念。現在，讓我們實際動手，學習最常用的 Tailwind 類別。這篇文章會帶你從設定專案開始，到寫出一個完整的卡片元件。

為什麼要學會「讀」Tailwind 類別？

當你使用 AI 輔助寫程式時，產生的 HTML 往往會充滿 Tailwind 類別：

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-gray-800">標題</h2>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    按鈕
  </button>
</div>
Code language: HTML, XML (xml)

如果你不懂這些類別的意思，就很難判斷樣式是否正確，也無法快速調整。本文會幫助你建立讀懂這些類別的基礎能力。

快速開始：CDN vs npm

在開始寫 Tailwind 之前，需要先把它加到專案中。有兩種主要方式：

方式一：CDN（學習用，快速體驗）

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">
    Hello Tailwind!
  </h1>
</body>
</html>
Code language: HTML, XML (xml)

優點：一行就能用，適合快速測試 缺點：無法客製化設定，不適合正式專案

方式二：npm 安裝（正式專案）

npm install -D tailwindcss
npx tailwindcss init

這會產生 tailwind.config.js 設定檔。接著在 CSS 檔案中加入：

@tailwind base;
@tailwind components;
@tailwind utilities;
Code language: CSS (css)

讀法解析：

  • @tailwind base：載入基礎樣式（reset）
  • @tailwind components：載入元件樣式
  • @tailwind utilities：載入工具類別（這是最主要的部分）

本文範例可以用 CDN 方式快速體驗，但正式開發建議用 npm。

文字類別：控制字型樣式

文字是網頁最基本的元素，Tailwind 提供了完整的文字樣式類別。

字型大小：text-{size}

<p class="text-xs">極小文字（12px）</p>
<p class="text-sm">小文字（14px）</p>
<p class="text-base">基本文字（16px）</p>
<p class="text-lg">大文字（18px）</p>
<p class="text-xl">特大文字（20px）</p>
<p class="text-2xl">2倍大（24px）</p>
<p class="text-3xl">3倍大（30px）</p>
Code language: HTML, XML (xml)

讀法解析：

  • text- 前綴表示文字相關
  • 大小從 xs（extra small）到 9xl 都有
  • 數字越大，字越大

文字顏色：text-{color}-{shade}

<p class="text-gray-500">灰色文字</p>
<p class="text-red-600">紅色文字</p>
<p class="text-blue-700">藍色文字</p>
<p class="text-green-500">綠色文字</p>
Code language: HTML, XML (xml)

讀法解析：

  • 顏色名稱：gray, red, blue, green, yellow, purple 等
  • 數字 100-900：數字越大顏色越深
  • 500 是標準色，300 是淺色，700 是深色

字重：font-{weight}

<p class="font-light">細體</p>
<p class="font-normal">正常</p>
<p class="font-medium">中等</p>
<p class="font-semibold">半粗</p>
<p class="font-bold">粗體</p>
Code language: HTML, XML (xml)

實際範例：標題組合

<h1 class="text-3xl font-bold text-gray-900">
  主標題
</h1>
<p class="text-lg text-gray-600">
  這是副標題，使用較淺的灰色
</p>
Code language: HTML, XML (xml)

間距類別：控制空間

間距是版面配置的關鍵，Tailwind 用簡潔的命名讓你快速設定。

Padding：p-{size}

Padding 是元素內部的留白。

<!-- 四邊都是 4 單位（16px） -->
<div class="p-4">內容</div>

<!-- 水平方向（左右）8 單位 -->
<div class="px-8">內容</div>

<!-- 垂直方向（上下）2 單位 -->
<div class="py-2">內容</div>

<!-- 分別設定各邊 -->
<div class="pt-4 pr-2 pb-4 pl-2">內容</div>
Code language: HTML, XML (xml)

讀法解析：

  • p-4：padding 四邊都是 4 單位
  • px-：padding x 軸（左右）
  • py-：padding y 軸（上下）
  • pt-, pr-, pb-, pl-：top, right, bottom, left

Margin：m-{size}

Margin 是元素外部的留白，命名規則和 Padding 一樣。

<!-- 四邊 margin -->
<div class="m-4">內容</div>

<!-- 水平置中（常用技巧） -->
<div class="mx-auto">置中的區塊</div>

<!-- 底部間距 -->
<div class="mb-8">段落一</div>
<div class="mb-8">段落二</div>
Code language: HTML, XML (xml)

常見組合：

  • mx-auto：水平置中，搭配固定寬度使用
  • mb-4：底部間距，用於分隔元素

間距數值對照表

類別 實際大小
0 0px
1 4px
2 8px
4 16px
6 24px
8 32px
12 48px
16 64px

規律：數字乘以 4 就是實際 px 值（大部分情況）

背景與邊框：視覺美化

背景顏色：bg-{color}-{shade}

<div class="bg-white">白色背景</div>
<div class="bg-gray-100">淺灰背景</div>
<div class="bg-blue-500">藍色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">漸層背景</div>
Code language: HTML, XML (xml)

邊框：border-{width} 和 border-{color}

<!-- 基本邊框 -->
<div class="border">預設 1px 邊框</div>

<!-- 指定邊框寬度 -->
<div class="border-2">2px 邊框</div>
<div class="border-4">4px 邊框</div>

<!-- 邊框顏色 -->
<div class="border border-gray-300">灰色邊框</div>
<div class="border-2 border-blue-500">藍色粗邊框</div>

<!-- 單邊邊框 -->
<div class="border-b border-gray-200">只有底部邊框</div>
Code language: HTML, XML (xml)

圓角：rounded-{size}

<div class="rounded">小圓角（4px）</div>
<div class="rounded-md">中圓角（6px）</div>
<div class="rounded-lg">大圓角（8px）</div>
<div class="rounded-xl">特大圓角（12px）</div>
<div class="rounded-full">完全圓形</div>
Code language: HTML, XML (xml)

陰影：shadow-{size}

<div class="shadow">基本陰影</div>
<div class="shadow-md">中等陰影</div>
<div class="shadow-lg">大陰影</div>
<div class="shadow-xl">特大陰影</div>
Code language: HTML, XML (xml)

實際範例：卡片樣式

<div class="bg-white border border-gray-200 rounded-lg shadow-md p-6">
  卡片內容
</div>
Code language: HTML, XML (xml)

拆解解讀：

  • bg-white：白色背景
  • border border-gray-200：淺灰色邊框
  • rounded-lg：大圓角
  • shadow-md：中等陰影
  • p-6：內部間距 24px

Flex 佈局：排列元素

Flexbox 是現代 CSS 佈局的核心，Tailwind 讓它變得更簡單。

啟用 Flex：flex

<div class="flex">
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>
Code language: HTML, XML (xml)

加上 flex 類別後，子元素會自動水平排列。

主軸對齊：justify-{value}

<!-- 靠左（預設） -->
<div class="flex justify-start">...</div>

<!-- 置中 -->
<div class="flex justify-center">...</div>

<!-- 靠右 -->
<div class="flex justify-end">...</div>

<!-- 平均分散 -->
<div class="flex justify-between">...</div>

<!-- 等距分散 -->
<div class="flex justify-around">...</div>
Code language: HTML, XML (xml)

交叉軸對齊：items-{value}

<!-- 頂部對齊（預設） -->
<div class="flex items-start">...</div>

<!-- 垂直置中 -->
<div class="flex items-center">...</div>

<!-- 底部對齊 -->
<div class="flex items-end">...</div>
Code language: HTML, XML (xml)

間距：gap-{size}

<div class="flex gap-4">
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>
Code language: HTML, XML (xml)

gap-4 會在每個項目之間加入 16px 的間距。

方向控制：flex-row 和 flex-col

<!-- 水平排列（預設） -->
<div class="flex flex-row">...</div>

<!-- 垂直排列 -->
<div class="flex flex-col">...</div>
Code language: HTML, XML (xml)

實際範例：導覽列

<nav class="flex items-center justify-between p-4 bg-white shadow">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">首頁</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">關於</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">聯絡</a>
  </div>
</nav>
Code language: HTML, XML (xml)

拆解解讀：

  • flex items-center justify-between：水平排列，垂直置中，兩端對齊
  • p-4：內部間距
  • bg-white shadow：白色背景加陰影
  • flex gap-6：連結之間有間距

Grid 佈局：網格排列

Grid 適合做規律的網格佈局，如產品列表、圖片牆等。

基本 Grid：grid 和 grid-cols-{n}

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Code language: HTML, XML (xml)

這會產生 3 欄的網格，每個格子間隔 16px。

常用欄數

<!-- 2 欄 -->
<div class="grid grid-cols-2 gap-4">...</div>

<!-- 3 欄 -->
<div class="grid grid-cols-3 gap-4">...</div>

<!-- 4 欄 -->
<div class="grid grid-cols-4 gap-4">...</div>
Code language: HTML, XML (xml)

實際範例：產品網格

<div class="grid grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-4">
    <img src="product1.jpg" class="w-full rounded">
    <h3 class="mt-4 font-bold">產品名稱</h3>
    <p class="text-gray-600">$299</p>
  </div>
  <!-- 更多產品卡片... -->
</div>
Code language: JavaScript (javascript)

實作練習：完整的卡片元件

現在，讓我們把學到的所有概念組合起來，做一個完整的卡片元件：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

  <div class="max-w-sm bg-white rounded-xl shadow-lg overflow-hidden">
    <!-- 圖片區域 -->
    <img
      src="https://picsum.photos/400/200"
      alt="封面圖"
      class="w-full h-48 object-cover"
    >

    <!-- 內容區域 -->
    <div class="p-6">
      <!-- 標籤 -->
      <span class="text-xs font-semibold text-blue-600 bg-blue-100 px-2 py-1 rounded">
        新功能
      </span>

      <!-- 標題 -->
      <h2 class="mt-4 text-xl font-bold text-gray-900">
        Tailwind CSS 入門指南
      </h2>

      <!-- 描述 -->
      <p class="mt-2 text-gray-600">
        學習如何使用 Tailwind CSS 快速建立現代化的網頁介面。
      </p>

      <!-- 底部區域 -->
      <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <img
            src="https://picsum.photos/32/32"
            alt="作者"
            class="w-8 h-8 rounded-full"
          >
          <span class="text-sm text-gray-700">作者名稱</span>
        </div>
        <span class="text-sm text-gray-500">3 分鐘閱讀</span>
      </div>
    </div>
  </div>

</body>
</html>
Code language: HTML, XML (xml)

逐區塊解讀

外層容器：

<div class="max-w-sm bg-white rounded-xl shadow-lg overflow-hidden">
Code language: JavaScript (javascript)
  • max-w-sm：最大寬度 384px
  • rounded-xl：大圓角
  • shadow-lg：大陰影
  • overflow-hidden：超出部分隱藏（讓圖片圓角生效）

圖片：

<img class="w-full h-48 object-cover">
Code language: JavaScript (javascript)
  • w-full：寬度 100%
  • h-48：固定高度 192px
  • object-cover：圖片填滿並裁切

標籤：

<span class="text-xs font-semibold text-blue-600 bg-blue-100 px-2 py-1 rounded">
Code language: JavaScript (javascript)
  • 小字、半粗體、藍色文字配淺藍背景

底部 Flex 佈局：

<div class="flex items-center justify-between">
Code language: JavaScript (javascript)
  • 水平排列、垂直置中、兩端對齊

小結

本文介紹了 Tailwind CSS 最常用的類別：

類別 用途 範例
文字大小 控制字型尺寸 text-lg, text-2xl
文字顏色 設定文字顏色 text-gray-600, text-blue-500
字重 控制粗細 font-bold, font-medium
Padding 內部間距 p-4, px-6, py-2
Margin 外部間距 m-4, mx-auto, mb-8
背景 背景顏色 bg-white, bg-gray-100
邊框 邊框樣式 border, border-gray-200
圓角 圓角大小 rounded-lg, rounded-full
陰影 陰影效果 shadow-md, shadow-lg
Flex 彈性佈局 flex, justify-between, items-center
Grid 網格佈局 grid, grid-cols-3, gap-4

重點整理：

  • Tailwind 類別命名有規律：屬性-值 或 屬性-方向-值
  • 顏色數字 100-900，越大越深
  • 間距數字乘以 4 約等於 px 值
  • flex 和 grid 是佈局的兩大利器
  • 多個類別組合起來就能完成複雜的樣式

在下一篇文章中，我們將學習響應式設計，讓網頁在不同螢幕尺寸下都能完美呈現。

進階測驗：Tailwind CSS 基礎語法

測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。

1. AI 產生了這段按鈕程式碼，但按鈕看起來太擠了。你應該調整哪個部分？ 錯誤診斷

<button class=”bg-blue-500 text-white rounded”> 送出 </button>
  • A. 把 rounded 改成 rounded-lg
  • B. 把 bg-blue-500 改成 bg-blue-600
  • C. 加上 px-4 py-2 增加內部間距
  • D. 加上 m-4 增加外部間距

2. 你想讓一個區塊水平置中在頁面上，AI 建議用這段程式碼，但沒有效果。問題在哪？ 錯誤診斷

<div class=”mx-auto”> 這個區塊應該要置中 </div>
  • A. 應該用 text-center 而不是 mx-auto
  • B. 需要加上固定寬度如 max-w-md，否則區塊會佔滿整個寬度
  • C. 應該用 my-auto 而不是 mx-auto
  • D. 需要在父元素加上 flex

3. 設計師要求你做一個卡片，規格是：白色背景、大圓角、中等陰影、內部間距 24px。哪個組合是正確的？ 情境題

設計規格： – 背景：白色 – 圓角：大 – 陰影：中等 – 內距：24px
  • A. bg-white rounded shadow p-4
  • B. bg-gray-100 rounded-lg shadow-md p-6
  • C. bg-white rounded-xl shadow-lg p-8
  • D. bg-white rounded-lg shadow-md p-6

4. 你需要做一個導覽列，Logo 在左邊，選單連結在右邊，垂直置中對齊。應該用哪組 Flex 類別？ 情境題

需求： – Logo 靠左 – 選單靠右 – 垂直置中
  • A. flex justify-center items-center
  • B. flex justify-around items-start
  • C. flex justify-between items-center
  • D. flex flex-col justify-between

5. AI 產生的卡片圖片圓角沒有正確顯示，檢查程式碼後發現問題。哪個修正是正確的？ 錯誤診斷

<div class=”rounded-xl”> <img src=”cover.jpg” class=”w-full”> <div class=”p-4″>內容</div> </div> 問題：圖片的角落是直角，沒有圓角效果
  • A. 在 img 標籤加上 rounded-xl
  • B. 在外層 div 加上 overflow-hidden
  • C. 把 rounded-xl 改成 rounded-full
  • D. 在 img 標籤加上 object-cover
標籤

相關文章

發佈留言

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