使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(三) - TailwindCSS v4 內建 Utility Classes 速查
· 閱讀時間約 14 分鐘
本文是「使用 shadcn/ui 前該補的 TailwindCSS 基礎知識」系列文章的第三篇
系列文章：
- 從 MUI 到 TailwindCSS 設計哲學的轉變
- 理解 TailwindCSS 的運作原理
- TailwindCSS v4 內建 Utility Classes 速查（本篇）
- 透過 @theme 自訂設計系統
- 解析 shadcn/ui 的設計系統
- shadcn/ui 生態系工具鏈
這篇文章介紹的所有 utility classes 都是 TailwindCSS 預設內建的，只要安裝 TailwindCSS 就能直接使用，不需要任何額外配置。
如果你想了解如何透過 @theme 自訂設計系統（例如 shadcn/ui 的語意化顏色），請參考下一篇：透過 @theme 自訂設計系統。
顏色系統
TailwindCSS 內建了豐富的調色盤，格式為：{屬性}-{顏色}-{深淺度}
顏色相關的 Utility Classes
同一個顏色可以套用到不同的 CSS 屬性上，以下是最常用的幾種：
| 前綴 | 對應的 CSS 屬性 | 範例 |
|---|---|---|
bg- | background-color | bg-blue-500 |
text- | color | text-blue-500 |
border- | border-color | border-blue-500 |
ring- | box-shadow（外框環） | ring-blue-500 |
outline- | outline-color | outline-blue-500 |
shadow- | box-shadow（陰影色） | shadow-blue-500 |
accent- | accent-color（表單元素） | accent-blue-500 |
caret- | caret-color（游標色） | caret-blue-500 |
fill- | fill（SVG 填充） | fill-blue-500 |
stroke- | stroke（SVG 線條） | stroke-blue-500 |
from- / to- / via- | 漸層顏色 | from-blue-500 |
內建顏色名稱
TailwindCSS 預設提供以下顏色：
- 灰階系列：
slate、gray、zinc、neutral、stone - 彩色系列：
red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose
完整顏色參考：TailwindCSS Colors 官方文件
深淺度規則
每個顏色都有 11 個深淺等級：
50 → 最淺（幾乎是白色）
100 → 很淺
200 → 淺
300 → 稍淺
400 → 中淺
500 → 標準（主色調）
600 → 中深
700 → 深
800 → 很深
900 → 最深（幾乎 是黑色）
950 → 極深（v3.2+ 新增）
使用範例
// 背景色
<div className="bg-blue-500">藍色背景</div>
<div className="bg-red-600">紅色背景（較深）</div>
<div className="bg-green-400">綠色背景（較淺）</div>
// 文字顏色
<p className="text-gray-700">深灰色文字</p>
<p className="text-blue-500">藍色文字</p>
// 邊框顏色（需要先設定邊框寬度）
<div className="border-2 border-red-500">紅色邊框</div>
透明度控制
TailwindCSS 支援兩種透明度語法：
// 方法 1：使用 / 語法（推薦，只影響該屬性）
<div className="bg-blue-500/50">50% 透明度的藍色背景</div>
<div className="text-gray-900/80">80% 透明度的文字</div>
// 方法 2：使用 opacity 屬性（影響整個元素，包括子元素）
<div className="bg-blue-500 opacity-50">整個元素 50% 透明</div>
兩種透明度的差異
bg-blue-500/50：只有背景色是半透明的，文字和其他內容不受影響opacity-50：整個元素（包括文字、圖片、子元素）都會變成半透明
文字與字型
字型種類（Font Family）
TailwindCSS 內建三種字型堆疊：
<p className="font-sans">無襯線字體（預設）</p>
<p className="font-serif">襯線字體</p>
<p className="font-mono">等寬字體（程式碼用）</p>
這三個 class 對應的 CSS：
| Class | 對應的 CSS font-family |
|---|---|
font-sans | ui-sans-serif, system-ui, sans-serif, ... |
font-serif | ui-serif, Georgia, Cambria, ... |
font-mono | ui-monospace, SFMono-Regular, Menlo, ... |
字體大小（Font Size）
<p className="text-xs">極小文字 (0.75rem / 12px)</p>
<p className="text-sm">小文字 (0.875rem / 14px)</p>
<p className="text-base">基礎文字 (1rem / 16px)</p>
<p className="text-lg">大文字 (1.125rem / 18px)</p>
<p className="text-xl">特大文字 (1.25rem / 20px)</p>
<p className="text-2xl">2倍大 (1.5rem / 24px)</p>
<p className="text-3xl">3倍大 (1.875rem / 30px)</p>
<p className="text-4xl">4倍大 (2.25rem / 36px)</p>
規則：text-{size}，size 可以是 xs、sm、base、lg、xl、2xl ... 到 9xl
字體粗細（Font Weight）
<p className="font-thin">極細 (100)</p>
<p className="font-light">細 (300)</p>
<p className="font-normal">正常 (400)</p>
<p className="font-medium">中等 (500)</p>
<p className="font-semibold">半粗 (600)</p>
<p className="font-bold">粗體 (700)</p>
<p className="font-extrabold">特粗 (800)</p>
<p className="font-black">極粗 (900)</p>
行高（Line Height）
<p className="leading-none">無行高 (1)</p>
<p className="leading-tight">緊湊行高 (1.25)</p>
<p className="leading-snug">稍緊行高 (1.375)</p>
<p className="leading-normal">正常行高 (1.5)</p>
<p className="leading-relaxed">寬鬆行高 (1.625)</p>
<p className="leading-loose">很寬鬆行高 (2)</p>
字距（Letter Spacing）
<p className="tracking-tighter">極緊字距 (-0.05em)</p>
<p className="tracking-tight">緊字距 (-0.025em)</p>
<p className="tracking-normal">正常字距 (0)</p>
<p className="tracking-wide">寬字距 (0.025em)</p>
<p className="tracking-wider">較寬字距 (0.05em)</p>
<p className="tracking-widest">極寬字距 (0.1em)</p>
文字對齊與裝飾
// 對齊
<p className="text-left">靠左對齊</p>
<p className="text-center">置中對齊</p>
<p className="text-right">靠右對齊</p>
<p className="text-justify">兩端對齊</p>
// 裝飾
<p className="underline">底線</p>
<p className="line-through">刪除線</p>
<p className="no-underline">移除底線</p>
// 大小寫轉換
<p className="uppercase">全部大寫 (HELLO)</p>
<p className="lowercase">全部小寫 (hello)</p>
<p className="capitalize">首字母大寫 (Hello World)</p>
間距系統（Spacing）
這是 TailwindCSS 最重要的概念之一。預設的間距單位是 0.25rem（4px）。
間距數值對照表
數字 × 0.25rem = 實際大小
0 → 0
1 → 0.25rem (4px)
2 → 0.5rem (8px)
3 → 0.75rem (12px)
4 → 1rem (16px)
6 → 1.5rem (24px)
8 → 2rem (32px)
12 → 3rem (48px)
16 → 4rem (64px)
Margin（外距）
// 四個方向
<div className="m-4">四周 margin 1rem</div>
// 單一方向
<div className="mt-4">上方 margin (top)</div>
<div className="mr-4">右方 margin (right)</div>
<div className="mb-4">下方 margin (bottom)</div>
<div className="ml-4">左方 margin (left)</div>
// 水平/垂直
<div className="mx-4">左右 margin (x 軸)</div>
<div className="my-4">上下 margin (y 軸)</div>
// 自動置中
<div className="mx-auto">水平置中</div>
// 負值（向外延伸）
<div className="-mt-4">負 margin（向上移動 1rem）</div>
Padding（內距）
// 四個方向
<div className="p-4">四周 padding 1rem</div>
// 單一方向
<div className="pt-4">上方 padding</div>
<div className="pr-4">右方 padding</div>
<div className="pb-4">下方 padding</div>
<div className="pl-4">左方 padding</div>
// 水平/垂直
<div className="px-4">左右 padding</div>
<div className="py-4">上下 padding</div>
Gap（Flexbox / Grid 子元素間距）
// Flexbox 範例
<div className="flex gap-4">
<div>項目 1</div>
<div>項目 2</div>
<div>項目 3</div>
</div>
// Grid 範例
<div className="grid grid-cols-3 gap-6">
<div>格子 1</div>
<div>格子 2</div>
<div>格子 3</div>
</div>
// 分別控制水平/垂直間距
<div className="grid gap-x-8 gap-y-4">
{/* 水平間距 8 (2rem)，垂直間距 4 (1rem) */}
</div>
版面配置（Layout）
Display 屬性
<div className="block">區塊元素</div>
<div className="inline">行內元素</div>
<div className="inline-block">行內區塊</div>
<div className="flex">Flexbox 容器</div>
<div className="inline-flex">行內 Flexbox</div>
<div className="grid">Grid 容器</div>
<div className="hidden">隱藏元素 (display: none)</div>
Flexbox 布局
// 基礎 Flex 容器
<div className="flex">
<div>項目 1</div>
<div>項目 2</div>
</div>
// 方向
<div className="flex flex-row">水平排列（預設）</div>
<div className="flex flex-col">垂直排列</div>
<div className="flex flex-row-reverse">水平反向</div>
<div className="flex flex-col-reverse">垂直反向</div>
// 主軸對齊 (justify-content)
<div className="flex justify-start">靠起點</div>
<div className="flex justify-center">置中</div>
<div className="flex justify-end">靠終點</div>
<div className="flex justify-between">兩端對齊，中間平分</div>
<div className="flex justify-around">環繞對齊</div>
<div className="flex justify-evenly">完全平分</div>
// 交叉軸對齊 (align-items)
<div className="flex items-start">頂部對齊</div>
<div className="flex items-center">垂直置中</div>
<div className="flex items-end">底部對齊</div>
<div className="flex items-stretch">拉伸填滿（預設）</div>
// 換行
<div className="flex flex-wrap">允許換行</div>
<div className="flex flex-nowrap">不換行（預設）</div>
常用組合：完美置中
<div className="flex items-center justify-center">
{/* 水平 + 垂直都置中 */}
</div>
Grid 布局
// 基礎 Grid
<div className="grid grid-cols-3 gap-4">
{/* ^^^^^^^^^^^^ 3 欄 ^^^^^ 間距 */}
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// 響應式 Grid（常用模式）
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{/* ^^^^^^^^ 手機 1 欄 ^^^^^^ 平板 2 欄 ^^^^^^ 桌面 3 欄 */}
</div>
尺寸控制
寬度（Width）
// 固定寬度（使用間距數值）
<div className="w-64">寬度 16rem (256px)</div>
<div className="w-96">寬度 24rem (384px)</div>
// 百分比
<div className="w-1/2">50% 寬度</div>
<div className="w-1/3">33.333% 寬度</div>
<div className="w-2/3">66.666% 寬度</div>
<div className="w-full">100% 寬度</div>
// 特殊值
<div className="w-screen">100vw（視窗寬度）</div>
<div className="w-auto">自動寬度</div>
<div className="w-fit">適應內容寬度</div>
// 最小/最大寬度
<div className="min-w-0">最小寬度 0</div>
<div className="max-w-md">最大寬度 28rem</div>
<div className="max-w-screen-lg">最大寬度 1024px</div>
高度（Height）
// 固定高度
<div className="h-64">高度 16rem</div>
<div className="h-screen">100vh（視窗高度）</div>
// 百分比
<div className="h-full">100% 高度</div>
<div className="h-1/2">50% 高度</div>
// 最小/最大高度
<div className="min-h-screen">最小高度 100vh</div>
<div className="max-h-96">最大高度 24rem</div>
Size（同時設定寬高）
// v4 新增：size 屬性
<div className="size-16">寬高都是 4rem</div>
<div className="size-full">寬高都是 100%</div>
// 實務範例：圖標按鈕
<button className="size-9 rounded-md flex items-center justify-center">
<Icon />
</button>
邊框與圓角
邊框（Border）
// 邊框寬度（預設無邊框，需明確指定）
<div className="border">1px 邊框</div>
<div className="border-2">2px 邊框</div>
<div className="border-4">4px 邊框</div>
// 單邊邊框
<div className="border-t">上邊框</div>
<div className="border-r">右邊框</div>
<div className="border-b">下邊框</div>
<div className="border-l">左邊框</div>
// 邊框顏色
<div className="border-2 border-gray-300">灰色邊框</div>
<div className="border-2 border-blue-500">藍色邊框</div>
// 邊框樣 式
<div className="border-2 border-solid">實線（預設）</div>
<div className="border-2 border-dashed">虛線</div>
<div className="border-2 border-dotted">點線</div>
圓角（Border Radius）
// 圓角大小
<div className="rounded-none">無圓角</div>
<div className="rounded-sm">小圓角 (0.125rem)</div>
<div className="rounded">預設圓角 (0.25rem)</div>
<div className="rounded-md">中圓角 (0.375rem)</div>
<div className="rounded-lg">大圓角 (0.5rem)</div>
<div className="rounded-xl">特大圓角 (0.75rem)</div>
<div className="rounded-2xl">2倍大圓角 (1rem)</div>
<div className="rounded-full">完全圓形</div>
// 單邊圓角
<div className="rounded-t-lg">上方圓角</div>
<div className="rounded-r-lg">右方圓角</div>
<div className="rounded-b-lg">下方圓角</div>
<div className="rounded-l-lg">左方圓角</div>
// 單一角落
<div className="rounded-tl-lg">左上圓角</div>
<div className="rounded-tr-lg">右上圓角</div>
<div className="rounded-br-lg">右下圓角</div>
<div className="rounded-bl-lg">左下圓角</div>
狀態變化（Pseudo-classes）
TailwindCSS 使用「前綴:」語法來處理各種狀態。
Hover 狀態
<button className="bg-blue-500 hover:bg-blue-600">
滑鼠移上去會變深藍色
</button>
<a className="text-blue-500 hover:underline">
滑鼠移上去會有底線
</a>
// 多個 hover 效果
<button className="bg-white hover:bg-gray-100 hover:shadow-lg transition">
滑鼠移上去：背景變灰 + 陰影變大
</button>
Focus 狀態
<input
className="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
placeholder="點擊輸入框看效果"
/>
// 移除預設 outline，改用 ring
<button className="focus:outline-none focus:ring-2 focus:ring-blue-500">
自訂 focus 樣式
</button>
Active 與 Disabled 狀態
// Active（點擊當下）
<button className="bg-blue-500 active:bg-blue-700">
點擊時會變更深
</button>
// Disabled
<button
className="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
disabled
>
停用按鈕
</button>
響應式設計
TailwindCSS 使用 mobile-first 的響應式設計。
斷點規則
（無前綴） 所有尺寸（從 0px 開始）
sm: 640px 以上
md: 768px 以上
lg: 1024px 以上
xl: 1280px 以上
2xl: 1536px 以上
重要觀念
沒有前綴的 class 會套用到所有尺寸，帶前綴的 class 會從該斷點往上覆蓋。
響應式範例
// 這行的意思是：
<div className="flex flex-col md:flex-row">
{/* 0-767px: flex-col（垂直排列）*/}
{/* 768px 以上: flex-row（水平排列）*/}
</div>
// 不同螢幕尺寸顯示不同文字大小
<h1 className="text-2xl md:text-4xl lg:text-6xl">
{/* 0-767px: text-2xl */}
{/* 768-1023px: text-4xl */}
{/* 1024px 以上: text-6xl */}
響應式標題
</h1>
// 不同螢幕尺寸顯示/隱藏
<div className="hidden md:block">
{/* 0-767px: 隱藏 */}
{/* 768px 以上: 顯示 */}
桌面版選單
</div>
<div className="block md:hidden">
{/* 0-767px: 顯示 */}
{/* 768px 以上: 隱藏 */}
手機版選單
</div>
實務範例：響應式 Grid
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{/*
手機 (0-639px): 1 欄
小平板 (640-1023px): 2 欄
大平板 (1024-1279px): 3 欄
桌面 (1280px+): 4 欄
*/}
{items.map((item) => (
<Card key={item.id} {...item} />
))}
</div>
Reference
- Customizing Colors - TailwindCSS
- Background Color - TailwindCSS
- Text Color - TailwindCSS
- Border Color - TailwindCSS
- Font Family - TailwindCSS
- Font Size - TailwindCSS
- Font Weight - TailwindCSS
- Line Height - TailwindCSS
- Letter Spacing - TailwindCSS
- Text Align - TailwindCSS
- Padding - TailwindCSS
- Margin - TailwindCSS
- Gap - TailwindCSS
- Display - TailwindCSS
- Flexbox - TailwindCSS
- Grid Template Columns - TailwindCSS
- Justify Content - TailwindCSS
- Align Items - TailwindCSS
- Width - TailwindCSS
- Height - TailwindCSS
- Border Width - TailwindCSS
- Border Radius - TailwindCSS
- Hover, Focus, and Other States - TailwindCSS
- Responsive Design - TailwindCSS