[!info] related notes

• 所属总入口：Tailwind MOC
• 对象介绍：Tailwind CSS
• 阶段地图：Tailwind 基础 MOC · Tailwind 布局与响应式 MOC · Tailwind 设计系统 MOC · Tailwind 工程化 MOC
• 前置：CSS 学习路线（强烈建议至少完成布局前阶段）
• 相邻：CSS 工程化 MOC · Vite 学习路线

Tailwind 学习路线 MOC

这个概念为什么出现

把 Tailwind 当成“class 字符串背诵”会制造假进度：会堆 utility 却不懂层叠与盒模型，会改颜色却不会扩展主题，会复制组件 class 却无法在 monorepo 中配置 content 扫描。本路线把「从零到可交付工具类样式系统」拆成六个阶段。

[!abstract] 路线结论 先理解 utility-first 的工程动机与 CSS 前置，再掌握安装扫描与核心工具类；布局与响应式变体建立在 CSS 布局心智上，随后用 theme/token 做设计系统，最后进入组件抽取、与框架集成及 monorepo 工程化。

整条路线围绕五个问题：

1. utility-first 解决什么协作与一致性问题
2. 为什么 content 扫描决定产物体积
3. 响应式/状态变体如何映射到 CSS
4. theme 扩展如何代替魔法数字
5. 何时抽取组件 class，何时保持 utility

如何使用这份路线

场景	做法
CSS 不熟	先走 CSS 学习路线 阶段一到三
从零用 Tailwind	按本路线阶段顺序
已在项目里用	从阶段三/四补设计系统与工程化

难度标记

• L1 入门 · L2 基础 · L3 核心 · L4 设计系统/工程

依赖关系总图

flowchart TD
    S0["CSS 前置"] --> S1["阶段一 理念与安装"]
    S1 --> S2["阶段二 核心工具类"]
    S2 --> S3["阶段三 布局与响应式"]
    S3 --> S4["阶段四 设计 token 与主题"]
    S4 --> S5["阶段五 组件化复用"]
    S5 --> S6["阶段六 工程集成"]

阶段与子 MOC 对照

阶段	目标	主要子 MOC
一	理念、安装、content 扫描	基础 MOC
二	间距、颜色、排版、状态变体	基础 MOC
三	Flex/Grid 工具类与断点	布局与响应式
四	theme、命名、暗色	设计系统
五	组件抽取与可读性	设计系统
六	Vite/框架/monorepo	工程化

---

阶段一：理念与安装

目标：理解为什么用 utility-first，并完成可构建安装。

完成标准：

• 能解释与 BEM/CSS Modules 的差异
• 能配置 content 扫描路径
• 能在页面上看到 utility 生效

序号	笔记	核心问题	难度	源码
1.1	Tailwind CSS	是什么、边界	L1	否
1.2	Utility-First 心智模型	为什么这样写样式	L2	建议
1.3	安装 Tailwind 并写第一组工具类	安装闭环	L1	否
1.4	工具类与关注点分离	争议与取舍	L3	否
1.5	样式方案演进	大图	L2	否

---

阶段二：核心工具类

目标：用 spacing/color/typography 表达常见视觉。

序号	笔记	核心问题	难度	源码
2.1	核心工具类	最常用类映射到 CSS	L2	否
2.2	状态与响应式变体	hover/focus/md: 等	L2	否
2.3	CSS 变量	与 token 协作	L2	否

---

阶段三：布局与响应式

序号	笔记	核心问题	难度	源码
3.1	Flex / Grid	CSS 布局前置	L2	否
3.2	Tailwind 布局工具类	flex/grid 类如何用	L2	否
3.3	响应式布局	策略前置	L2	否
3.4	变体	断点变体实践	L2	否

---

阶段四：设计系统与主题

序号	笔记	核心问题	难度	源码
4.1	主题与设计 token	扩展 theme	L3	建议
4.2	主题命名约定（既有）	命名	L3	否
4.3	暗色模式	class/media 策略	L3	否

---

阶段五：组件化复用

序号	笔记	核心问题	难度	源码
5.1	样式复用策略	组件/循环/abstraction	L3	否
5.2	CSS Modules · BEM	对照方案	L2	否

---

阶段六：工程集成

序号	笔记	核心问题	难度	源码
6.1	Vite 学习路线	构建集成	L2	否
6.2	Monorepo 多包配置问题	content 扫描坑	L4	否
6.3	打印场景（既有）	特殊媒体	L3	否

---

如果只抓主干，优先这 6 个主题

1. Utility-First 心智
2. 安装与第一组工具类
3. 核心工具类
4. 状态与响应式变体
5. 主题与 token
6. 样式复用

0 到 1 的完成标准

• 能从零接入 Tailwind 并正确配置 content
• 能用工具类完成响应式卡片布局
• 能扩展 theme 颜色/间距而不是硬编码
• 能说明何时抽取组件而非继续堆 class
• 能在 monorepo 中定位“样式丢失”常见原因

认知跳跃提醒

1. CSS 盒模型不熟就上 Tailwind → 先 CSS 路线
2. 不配 content 却抱怨体积/类不生效 → 先 1.3
3. 复制超长 class 从不抽象 → 先 5.1

相关入口

• 总地图：Tailwind MOC
• 对象：Tailwind CSS
• CSS 本体：CSS 学习路线

自测题

1. 为什么 content 配置错误会导致“类写了没样式”或“产物巨大”？
2. utility-first 是否反对组件化？

答案

1. 扫描不到的 class 不会生成对应 CSS；扫得过宽会打进大量未用样式（视版本与策略而定）。
2. 不反对；它反对过早的间接层。稳定 UI 单元仍应组件化，只是样式表达以 utility 为主。