Tailwind 实战
零基础
本课程不讲“从零安装 Tailwind”，而是直接讲大学生项目里最常遇到的实用写法：布局、间距、响应式、暗黑模式，以及如何从视觉效果回到可维护的样式结构。学完这门课，你应该能在课程作业、课程展示和作品集页面中直接用 Tailwind 完成布局与视觉。
你将学会什么
Section titled “你将学会什么”- 建立布局直觉，减少“写了很多类但不知道在做什么”的情况
- 掌握学生项目里最高频的 Tailwind 模式
- 学会从页面级样式迁移到组件化样式
- 会写基础 HTML，理解
class属性 - 了解 CSS 的基础概念（颜色、间距、边框），不需要记住所有属性
- 有一个可以随时打开浏览器验证的页面骨架（没有的话，第一章会带你搭一个）
| 章节 | 内容 |
|---|---|
| 1. 布局直觉 | 用 flex/grid、间距与视觉层级快速搭出页面骨架 |
| 2. 响应式设计 | 断点前缀与移动优先的写法 |
| 3. 暗黑模式 | 语义化颜色与 dark: 前缀的配合 |
| 4. 组件化与状态反馈 | 抽组件的时机与 hover/focus/disabled 状态写法 |
| 5. 实战清单与细节规范 | 完整实战顺序、间距系统、卡片、表单与调试 |
学习路线建议
Section titled “学习路线建议”- 如果时间有限，先完成第 1、2、5 章，足以应付大多数课程作业
- 每章末尾都有 3 道小测验，答错时解析会说明原因
原子类写多了，类名太长怎么办？
Section titled “原子类写多了，类名太长怎么办？”先按「结构 → 间距 → 视觉」的顺序读懂一串类名，不要见到就抄。当同一段类名重复出现时，抽成组件：原子类留在组件内部，页面层只负责传数据和组合组件，之后改风格只需改组件一处。参考 布局直觉 与 组件化与状态反馈。
响应式必须手写媒体查询吗？
Section titled “响应式必须手写媒体查询吗？”不需要。用 sm:、md:、lg: 断点前缀即可，例如 grid-cols-1 md:grid-cols-2 表示小屏一列、中屏两列。先按最小屏幕写默认值，再逐级增加列数，不用离开 HTML 就能预览效果。写法详见 响应式设计。
暗黑模式需要复制一套深色主题吗？
Section titled “暗黑模式需要复制一套深色主题吗？”不需要。先写浅色语义，再补 dark: 版本：dark: 前缀只在深色模式下生效，浅色模式仍用默认类。这样维护时只改语义、不关心具体颜色值，将来调整主题也只需改一处。参见 暗黑模式。
用 Tailwind 做项目，按什么顺序写？
Section titled “用 Tailwind 做项目，按什么顺序写？”按「骨架 → 布局 → 视觉 → 语义」的顺序：先搭结构，再用 flex/grid 解决核心布局，然后补间距、圆角、阴影，最后统一颜色语义与暗黑模式。间距只从固定尺度里选，不确定类名时用浏览器开发者工具局部实验。完整流程见 实战清单与细节规范。
- 响应式设计（Tailwind CSS 官方文档）——断点前缀与移动优先写法的完整参考
- 暗黑模式（Tailwind CSS 官方文档）——
dark:变体与基于 class 的切换策略 - Flex 布局（Tailwind CSS 官方文档）——flex 工具类的定义与响应式用法
- Hover、Focus 与其他状态（Tailwind CSS 官方文档）——状态前缀的完整变体参考
相关课程
- Vue3 快速入门
理解响应式与组件化，独立写出课程展示页与作品集。