← FC Coder · HomePhase 01 · Lesson 08 · 60 min
Lesson08
Phase One · First App · Matchday 08 · Kit Day

Tailwind
上色

Today's 3 Jobs · 今天这三件事
  1. 01
    回到第 7 课的卡 · 给球员名加金色 + 大字号
    className="text-amber-500 text-5xl"
  2. 02
    整张卡变曼城蓝底 + 圆角 + 内边距
    bg-sky-600 text-slate-50 p-6 rounded-lg
  3. 03
    感受 · 一行 class 一个效果 · 秒变
    Tailwind = CSS 字条的预制版

你写的卡现在是白底黑字 —— 很丑。今天给它金边 · 曼城蓝 · 大字号 —— 5 个 className 一行,整张卡变模样。Phase 0 第 2 课你贴 CSS 字条;今天用现代姿势:Tailwind utility class。本质同一件事 · 写法变了。

Essence · Tailwind 的形状

一个 class = 一张小字条 · 一件事

text-amber-500 = 字涂金 · text-5xl = 字号到 48px · bg-sky-600 = 背景天蓝。空格拼起来 = 完整样式。

Chalk Board · 字条对照表
text-amber-500 text-5xl bg-sky-600 p-6 rounded-lg
金色 + 大字 + 蓝底 + 内边距 + 圆角
Phase 0 第 2 课写法
color: gold;
Phase 1 第 8 课写法
text-amber-500
本质
同一张字条 · 预制版

Cursor 把鼠标停在 text-amber-500 上 1 秒,会弹出它对应的真实 CSS(color: #f59e0b)—— Tailwind 不是魔法,背后就是 CSS。

Essence · className vs class

JSX 里写 className · HTML 里写 class

React 改名避冲突 —— class 在 JS 里已经占用了。

Chalk Board · 两种文件 · 两个写法
Phase 0: <div class="player-card">
Phase 1: <article className="bg-sky-600">
.html 文件
class="..."
.tsx 文件
className="..."
今天
全在 .tsx · 全用 className
Roster · 今天 4 种字条

不用背 · 抄着用 · 改数字看变化

颜色 · 字号 · 间距 · 边 —— 把球员卡上你想改的都管了。

  1. 01
    text-amber-500 / bg-sky-600
    色系-亮度 —— amber 金 · sky 蓝 · slate 灰 · 50→950 越大越深。
    今天只用这 3 色系 + 白(slate-50)。pink / purple / fuchsia 设计禁区。
  2. 02
    text-5xl / text-3xl / text-xl
    字号档 —— xs / sm / base / lg / xl / 2xl / 3xl / 4xl / 5xl / 6xl / 7xl / 8xl / 9xl。
    text-5xl ≈ 48px。改数字看变化 · 5 秒就熟。
  3. 03
    p-6 / mt-3 / rounded-lg
    空间三件套 —— padding(里面留白)/ margin(外面留白)/ rounded(圆角)。
    数字 1 = 4px · 4 = 16px · 6 = 24px。
  4. 04
    border-t border-sky-300
    边 —— border-t = 顶部一条 · -b 底 · -l 左 · -r 右。颜色用 border-X-Y。
    design.md 禁:border-l 超 1px 做装饰条 —— 用细线就好。
Half 2 · 在屏幕上

回 sandbox · 给上节课的卡换衣服

做完一步就点 ✓。每改一个 class · Cmd + S · 浏览器秒变。

01启动 · 打开 7 课的卡
01Min

Cursor + pnpm dev + 打开 sandbox

Cmd/Ctrl + ` · pnpm dev · 等 ✓ Ready · 浏览器 localhost:3000/lessons/07-my-first-card/sandbox 看到第 7 课的裸卡。
02给球员名涂金 · 变大
02Min

<h1> 加 className="text-amber-500"

<h1 className="text-amber-500">哈兰德</h1> · Cmd + S · 「哈兰德」三个字变金色。
03Min

同一行再加 text-5xl(空格分开)

<h1 className="text-amber-500 text-5xl"> · 保存 · 字变大 + 还是金。两张字条同时贴。
04Min

<p>ST · 9 号</p> 加 text-slate-600

<p className="text-slate-600">ST · 9 号</p> · 保存 · 位置那一行变浅灰。
03🌟 整张卡变曼城蓝
05Min

🌟 整张卡 · 5 个 class 一起

<article className="bg-sky-600 text-slate-50 p-6 rounded-lg"> · 保存 · 整张卡变曼城蓝 + 白字 + 内边距 + 圆角。今天最大的「哇」。
06Min

「哈兰德」为什么还是金色?

因为 <h1> 自己的 text-amber-500 比 <article> 的 text-slate-50 更靠近。「贴在更里面的字条通常赢」。今天不深讲 · Phase 2 React 组件时正经讲 specificity。
07Min

评分 · 变大 + 浅金

<p className="text-3xl text-amber-300">评分:91</p> · 保存。评分变中字号 + 浅金。
08Min

国家 · 上面来一条浅蓝细线

<p className="border-t border-sky-300 mt-3 pt-3">国家:挪威</p> · 保存。多了一条线分隔。
04玩 5 分钟 · 截图收官
09Min

玩 5 分钟 · 改 bg / rounded / text-size

bg-sky-600 → bg-amber-500 → bg-slate-900 / rounded-lg → rounded-3xl → rounded-none / text-5xl → text-7xl。每改一下保存 · 浏览器立刻变。
10Min

试一下 · 鼠标停在 text-amber-500 上

Cursor 会弹小框显示真实 CSS:color: #f59e0b。这证明 Tailwind 不是魔法 · 背后就是普通 CSS · Phase 0 第 2 课的同一回事。
11Min

📸 截图战利品

Mac Shift + Cmd + 4 框选你的曼城蓝卡。存 2026-XX-XX-我的曼城蓝卡.png · Phase 1 第三张战利品。
Half Time · 中场 · 讲给爸爸听

4 题 · 重点:Tailwind 和 CSS 是同一回事

比喻准不准不要紧。讲得出「本质相同 · 写法不同」就过。

01Tailwind 和 Phase 0 第 2 课 ea.com 写的 CSS · 本质一样吗?差在哪?Hint ↓

本质一样 · 都是 CSS 字条。Tailwind 是预制版 —— 一个 class = 一张小字条 · 少打字。

02className="text-amber-500 text-5xl" 里这两个 class 各做什么?为什么用空格分开?Hint ↓

一个字颜色 · 一个字大小。空格 = 两张字条都贴。一个 class 只做一件事 —— utility-first 的核心。

03你想要「整张卡变金色」· 改 <article> 还是 <h1>?为什么?Hint ↓

<article> 是外面的盒子 · <h1> 只是里面的一行。改外层就管所有内容。

04class 在 JSX 里要写成 className —— 为什么?Hint ↓

class 在 JS 里被占用了(原本意思是定义「类」)。React 改名 className 避冲突。.html 里还是 class。

Player Rating · 本课温度计

给「第一次给自己卡上色」打个分

说真话。爸爸会看到。

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

你的卡穿上了曼城蓝 + 金边 —— 这才是一张卡。

还有 11 步没打勾。Step 5 整卡变蓝那一刻已经命中今天的核心。其他下次补。

Next · Lesson 09 · 第一个变量 →