Tailwind CSS 教程
这是什么
Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，它不提供现成的「卡片」「按钮」组件，而是提供大量细粒度的小工具类，比如 p-4、text-red-500、flex，在 HTML 的 class 里直接拼这些类，就能把样式写出来。
utility-first 思想
传统写法里，你给元素起一个 class 名，再去样式表写规则：
<div class="alert">警告</div>.alert {
background: #fee2e2;
color: #b91c1c;
padding: 1rem;
}Tailwind 把「样式」拆成原子工具类，直接写在标签上：
<div class="bg-red-100 text-red-700 p-4">警告</div>前者样式和标签分离，改样式要跳到 CSS 文件；后者样式就在标签上，改起来直观，好处是样式不随项目变大而膨胀，也不需要费心起一堆 class 名。
与传统写 CSS 方式的对比
| 对比项 | 传统 CSS | Tailwind |
|---|---|---|
| 样式在哪 | 单独的 .css 文件 | 写在 HTML 的 class 上 |
| 命名 | 需要想 class 名 | 不用起名，直接用工具类 |
| 复用 | 靠自己抽公共类 | 工具类天然可组合 |
| 维护 | 文件越写越大 | 样式跟随结构，删元素即删样式 |
要注意，Tailwind 不是让你彻底不写 CSS。复杂动画、@theme 设计令牌、@utility 自定义工具类，仍然要落到 CSS 里。它只是把「日常布局样式」从手写 CSS 里解放出来。
前置知识
开始之前，建议你已经具备：
- HTML 基础（标签、class 属性）
- CSS 基础（盒模型、选择器、颜色）
- 会用 npm 安装包、能跑一个本地构建（如 Vite）
如果还不熟，可以先补一下 HTML/CSS 再来。