Layout 排版
佈局是 UI 的骨架。Tailwind 提供了完整的 Display、Flexbox、Grid 以及 Positioning 類別，讓你無需撰寫任何自訂 CSS 就能實作複雜的頁面結構。
Display & Box Sizing
- block / inline-block / inline
- flex / inline-flex / grid / inline-grid
- hidden —
display: none（常搭配斷點，如hidden md:block） - box-border / box-content — 控制盒子模型
Flexbox
<!-- 水平置中 + 垂直置中 --> <div class="flex items-center justify-center">...</div> <!-- 兩端對齊（導覽列常用）--> <div class="flex justify-between items-center">...</div> <!-- 換行與間距 (Gap) --> <div class="flex flex-wrap gap-4">...</div> <!-- 垂直排列並拉伸 --> <div class="flex flex-col items-stretch space-y-4">...</div>
Grid
<!-- 3 欄等寬格線 --> <div class="grid grid-cols-3 gap-4">...</div> <!-- 響應式格線：手機 1 欄 -> 平板 2 欄 -> 桌面 4 欄 --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">...</div> <!-- 跨欄 (Spanning) --> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 bg-blue-100">佔 2 欄</div> <div class="bg-blue-200">佔 1 欄</div> </div>
Position & Size
- relative / absolute / fixed / sticky
- top-0 / inset-0 (全方向 0) / z-50 (層級)
- w-full / w-screen / w-1/2 / w-[350px]
- h-full / h-screen / min-h-screen
Spacing 間距 (Margin & Padding)
Tailwind 使用 4px 為一個單位的比例系統（1 unit = 0.25rem = 4px）。這能確保專案中的間距始終保持一致的節奏感。
<!-- Padding (內距) --> p-4 → 各方向 16px px-6 → 左右 24px py-2 → 上下 8px pt-10 → 上方 40px <!-- Margin (外距) --> m-auto → 自動置中 mx-auto → 水平自動置中（容器常用） -mt-4 → 負外距 -16px mb-8 → 下方 32px <!-- 間距輔助 --> gap-4 → Grid/Flex 子元素間距 space-x-4 → 傳統水平子元素間距（建議改用 gap）
常用比例：0 (0px), 1 (4px), 2 (8px), 4 (16px), 6 (24px), 8 (32px), 10 (40px), 12 (48px), 16 (64px), 20 (80px), 24 (96px)。
Typography 文字排版
從字體大小、粗細到行高與字距，Tailwind 提供完整的控制能力。
<!-- 字體大小 --> text-xs (12px) / text-sm (14px) / text-base (16px) text-lg (18px) / text-xl (20px) / text-2xl (24px) ... text-9xl <!-- 字體粗細 --> font-light / font-normal / font-medium / font-semibold / font-bold <!-- 文字對齊與裝飾 --> text-center / text-right / text-justify underline / line-through / uppercase / capitalize <!-- 輔助功能 --> leading-tight / leading-normal / leading-loose (行高) tracking-tight / tracking-wide (字距) truncate (溢出省略號，需搭配 overflow-hidden)
Colors 顏色系統
Tailwind 內建 22 種專業色盤，每種顏色提供 50 到 950 的階梯選擇。這套系統確保了不同顏色間的對比度是一致的。
<!-- 文字顏色 --> text-gray-900 (深) / text-gray-500 (中) / text-gray-100 (淺) text-blue-600 / text-red-500 / text-emerald-400 <!-- 背景顏色 --> bg-white / bg-slate-50 / bg-indigo-600 <!-- 邊框顏色 --> border-gray-200 / border-blue-500 <!-- 透明度 (v3.0+) --> bg-blue-500/20 → 20% 透明度背景 text-black/75 → 75% 不透明度文字
提示：在 VS Code 插件中，你可以直接在 class 名稱旁看到實際顏色的預覽色塊。
Borders & Shadows 邊框與陰影
<!-- 邊框寬度與圓角 --> border → 1px 實線 border-2 / border-4 / border-t-2 (只有上方) rounded → 4px 圓角 rounded-lg → 8px 圓角 rounded-full → 膠囊/圓形 <!-- 陰影 --> shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl shadow-inner → 內陰影 shadow-blue-500/50 → 帶顏色的陰影 <!-- Ring (外框線) --> ring-2 ring-blue-500 ring-offset-2
Interactivity 互動與動畫
互動性是現代 UI 的靈魂。透過前綴（Prefix），你可以輕鬆定義各種狀態下的樣式。
<!-- 互動狀態 --> hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 active:scale-95 (點擊縮小效果) <!-- 過渡動畫 (Transition) --> transition-all → 啟用過渡 duration-300 → 300ms 持續時間 ease-in-out → 緩進緩出 <!-- 變形 (Transform) --> hover:rotate-12 hover:-translate-y-1 hover:skew-x-6
組合技範例：
class="transition-transform duration-200 hover:scale-110" — 這會讓元素在 hover 時有平滑的放大效果。
Grid
<!-- 3 欄等寬 --> <div class="grid grid-cols-3 gap-4"> <!-- 響應式欄數 --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- 自動填充最小 200px --> <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
Position & Size
- relative / absolute / fixed / sticky
- top-0 / right-0 / bottom-0 / left-0
- inset-0 — top/right/bottom/left 全部為 0
- w-full / w-1/2 / w-[350px] / max-w-xl
- h-screen / h-full / min-h-0
Spacing 間距
Tailwind 使用 4px 為基礎單位（1 unit = 4px）：
<!-- 各方向 padding --> p-4 → padding: 1rem (16px) px-4 → padding-left + padding-right: 1rem py-2 → padding-top + padding-bottom: 0.5rem pt-6 → padding-top: 1.5rem <!-- 各方向 margin --> m-auto → margin: auto mx-auto → 水平置中 mt-8 → margin-top: 2rem -mt-2 → margin-top: -0.5rem（負值） <!-- 子元素間距 --> space-x-4 → 水平子元素間距 1rem space-y-2 → 垂直子元素間距 0.5rem gap-4 → Grid/Flex 間距
常用數值：0、0.5、1、2、3、4、5、6、8、10、12、16、20、24、32、40、48、64
Typography 文字排版
<!-- 字體大小 --> text-xs → 0.75rem text-sm → 0.875rem text-base → 1rem text-lg → 1.125rem text-xl → 1.25rem text-2xl → 1.5rem text-4xl → 2.25rem text-9xl → 8rem <!-- 字重 --> font-thin / font-light / font-normal font-medium / font-semibold / font-bold / font-extrabold <!-- 行高 --> leading-none / leading-tight / leading-normal / leading-loose <!-- 文字對齊 --> text-left / text-center / text-right / text-justify <!-- 文字裝飾 --> underline / line-through / no-underline uppercase / lowercase / capitalize <!-- 文字溢出 --> truncate → 超出省略號（需搭配 overflow-hidden）
Colors 顏色
Tailwind 提供 22 種顏色，每種有 11 個深淺層次（50 最淺，950 最深）：
<!-- 背景色 --> bg-white / bg-black / bg-transparent bg-blue-500 / bg-indigo-600 / bg-emerald-400 <!-- 文字色 --> text-gray-700 / text-slate-500 / text-zinc-400 <!-- 邊框色 --> border-gray-200 / border-blue-500 <!-- 透明度（可搭配顏色使用）--> bg-blue-500/50 → 50% 透明 text-black/75 → 75% 不透明
Borders & Shadows
<!-- 邊框 --> border → border-width: 1px border-2 → border-width: 2px border-t → 只有上邊框 rounded → border-radius: 0.25rem rounded-lg → 0.5rem rounded-xl → 0.75rem rounded-2xl → 1rem rounded-full → 9999px（圓形） <!-- 陰影 --> shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl shadow-inner → 內陰影 shadow-none → 移除陰影 <!-- 外框（outline/ring）--> ring-2 → box-shadow outline ring-blue-500 → outline 顏色
互動狀態
<!-- hover 狀態 --> hover:bg-blue-600 hover:text-white hover:shadow-lg hover:scale-105 → 放大 105% <!-- focus 狀態 --> focus:outline-none focus:ring-2 focus:ring-blue-500 <!-- transition 動畫 --> transition → 基本過渡 transition-all → 所有屬性 duration-150 → 150ms duration-300 → 300ms ease-in-out → 緩進緩出