TailwindCSS 路线 00：给从未用过的人——学习顺序、练习方式与避坑清单

这一篇给你一张“学习地图”，但不是空喊口号：我会用最少概念把 Tailwind 的知识组织成可执行的顺序，并给你一份随时能查的类名速查与写法套路。

在开始之前，建议先读 00A（历史与取舍）。理解它解决的问题，会让你后面少走很多弯路。

01 你需要掌握的不是“类名”，而是 4 个能力#

能力 A：把 UI 分解成“布局 + 排版 + 皮肤 + 交互”#

每个组件都可以拆成：

• 布局：flex/grid/间距/尺寸
• 排版：字号/字重/行高/字距
• 皮肤：背景/边框/阴影/圆角/颜色
• 交互：hover/focus/active/disabled

这比背 px-4、py-2 更重要。

能力 B：建立 Token（变量）让全站一致#

你至少要有：背景、表面、边框、强调色、focus ring。

能力 C：组件化与复用层级#

从低到高：

• Token（变量）
• 页面模板（列表/详情/双栏）
• 基础组件（Button/Input/Card）
• 业务组件（例如 PostCard）

能力 D：能排错#

Tailwind 上手最常见的阻塞不是“不会写”，而是“写了不生效 / 被覆盖 / dark 不对”。

02 学习顺序（建议严格按这个走）#

• 00A：为什么 Tailwind 会诞生（历史、取舍、AI 时代）
• 01：安装/接入/验证 + Token/暗色/可维护写法
• 02：布局与响应式（把断点写成团队模板）
• 03：组件模式（Button/Badge/Card/Popover）
• 04：表单与状态（真实业务高频）
• 05：长文排版（Typography + Markdown）
• 06：动效与交互反馈（质感与一致性）
• 07：主题与 Token（从暗色走向设计系统）
• 08：可访问性（focus、aria、键盘）
• 09：性能与迁移（复用策略、渐进迁移）
• 10：毕业项目（串联所有知识）

03 一份“够你用一年的”类名速查（最常用那部分）#

布局#

• Flex：flex items-center justify-between gap-4
• Grid：grid gap-4 md:grid-cols-2
• 宽度：max-w-3xl（正文）、max-w-5xl（列表）

间距#

• 组件内边距：px-4 py-3
• 列表节奏：space-y-2 / space-y-4

交互#

• hover：hover:bg-[var(--surface)]/80
• focus：focus-visible:ring-4 focus-visible:ring-[var(--focus-ring)]
• active：active:scale-[0.98]（可选）

排版#

• 标题：font-serif text-4xl font-bold tracking-tight
• 正文：text-sm leading-relaxed

04 写法套路：把 class 组织得“可读”#

实战里推荐把 class 分组写（用数组 join）：

const cls = [
  "rounded-2xl border px-4 py-3",
  "bg-[var(--surface)] text-stone-900 dark:text-stone-100",
  "transition-colors hover:bg-[var(--surface)]/80",
  "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--focus-ring)]",
].join(" ");

可读性比“短”重要；重复出现再抽常量/抽组件。

05 你应该怎么练（像做项目一样练）#

不要做“写一堆 demo”那种练法。推荐练法：

• 每篇文章都在项目里增加 1 个可见产出（一个组件或一个页面）
• 每个产出至少覆盖：默认/hover/focus/disabled/dark
• 练完就能放进真实项目用

下一篇（01）从安装与接入开始：你会看到完整命令、配置文件和排错清单，确保你不是“看懂了”，而是真的跑起来了。