1. 盒子模型 (Box Model)
- Padding (內距):
p-4(1rem),px-2(左右),py-8(上下) - Margin (外距):
m-4,mt-2(上),mb-10(下) - Width/Height:
w-64,h-32,w-full(100%),h-screen(100vh)
這是 Tailwind 的強項。
flex: 啟動 Flex 佈局。items-center: 垂直居中。justify-between: 水平分散對齊。gap-4: 子元素之間的間距。
3. 美化 (Styling)
- 顏色:
bg-white(背景白),text-gray-800(文字深灰)。 - 圓角:
rounded-lg,rounded-full(圓形)。 - 陰影:
shadow-md,shadow-xl。
🛠️ 題目 1：實作個人檔案卡片
🎯 目標效果：
一個白色背景、圓角、有陰影、且內部文字水平垂直置中的卡片。
- 卡片要有寬度（例如
w-72）。 - 圖片要變成圓形 (
rounded-full)。 - 按鈕要有藍色背景 (
bg-blue-500)、白色文字，滑鼠懸停時變深色 (hover:bg-blue-600)。
請在你的 index.html 中，將以下這段原始碼放入 <body>，並根據註解中的指示填寫 class：
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div class="">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Lucky"
class="mx-auto"
alt="Avatar"
/>
<h2 class="">Gemini Explorer</h2>
<p class="">Tailwind CSS 新手村村民</p>
<button class="">追蹤我</button>
</div>
</div>
💡 小撇步：
- 水平置中： 在 Flex 容器中用
items-center；對區塊元素（如圖片）本身用mx-auto。 - 間距單位： Tailwind 的
1代表0.25rem(4px)，所以p-4就是16px。 - 顏色階梯： 從
50到950，數字越大越深。例如bg-blue-500是標準藍，bg-blue-600會深一點。
🧐 如何檢查你的成果？
當你寫完後，看看你的卡片是否具備：
- 層次感： 陰影讓卡片看起來像浮在灰色背景上。
- 舒適感： 文字與邊框之間有足夠的內距（Padding）。
- 反饋感： 滑鼠移到按鈕上時，顏色會微微改變。
💻 實作
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div class="w-72 p-4 shadow-2xl">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Lucky"
class="mx-auto shadow-xl rounded-full"
alt="Avatar"
/>
<h2 class="text-2xl font-bold">Gemini Explorer</h2>
<p class="text-xs text-gray-700">Tailwind CSS 新手村村民</p>
<button
class="bg-blue-500 font-bold text-white p-1.5 rounded-lg cursor-pointer hover:bg-blue-600 duration-300"
>
追蹤我
</button>
</div>
</div>
🔍 Code Review：小改進大不同
雖然功能都達到了，但在 UI 設計上有幾個小地方可以優化，讓卡片看起來更有「專業感」：
- 卡片背景： 你忘了幫卡片加上
bg-white，現在它可能是透明的（看起來會髒髒的）。 - 間距（Spacing）：
- 內容太擠了。建議給卡片更大的內距
p-8。 - 元素之間（圖片、標題、按鈕）需要間距，可以對父容器使用
flex flex-col items-center gap-4。
- 內容太擠了。建議給卡片更大的內距
- 按鈕質感：
p-1.5對按鈕來說有點太薄，通常我們會用px-6 py-2這種左右寬、上下窄的比例。
🚀 進階練習：優化版實作
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div
class="w-80 bg-white p-8 shadow-2xl rounded-2xl flex flex-col items-center text-center gap-4"
>
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Lucky"
class="w-24 h-24 shadow-lg rounded-full border-4 border-gray-50"
alt="Avatar"
/>
<div>
<h2 class="text-2xl font-bold text-gray-800 tracking-tight">
Gemini Explorer
</h2>
<p class="text-sm text-gray-500 font-medium">Tailwind CSS 新手村村民</p>
</div>
<button
class="w-full bg-blue-600 text-white font-semibold py-2.5 rounded-xl hover:bg-blue-700 hover:-translate-y-1 transition-all duration-300 cursor-pointer shadow-md shadow-blue-200"
>
追蹤我
</button>
</div>
</div>
