Tailwind CSS 教程

Tailwind CSS 是一个功能优先的 CSS 框架。它把常见样式拆成可组合的工具类，让你直接在 HTML、模板或组件中完成布局、间距、颜色、响应式和状态样式。

和传统“先写 class，再写 CSS 文件”的方式不同，Tailwind 更强调把设计约束沉淀到配置中，把具体页面样式组合留在组件里。这样可以减少命名成本，也能让团队更快复用统一的设计尺度。

你将学到什么

本教程适合已经了解 HTML 和基础 CSS 的学习者。你会逐步掌握：

Tailwind 的工具类思维
安装、配置和内容扫描
间距、尺寸、颜色、字体、边框、阴影等基础样式
Flex、Grid 和常见布局模式
响应式断点和移动优先写法
hover、focus、disabled、dark mode 等状态样式
复用样式、抽取组件和维护大型项目
动画、表格、排版插件和自定义主题

一个最小示例

<section class="mx-auto max-w-3xl px-6 py-12">
  <h1 class="text-3xl font-bold text-slate-900">
    Tailwind CSS 入门
  </h1>
  <p class="mt-4 text-base leading-7 text-slate-600">
    使用工具类快速组合页面，同时保持设计尺度一致。
  </p>
  <a
    href="/zh/tailwind/tailwind-installation"
    class="mt-6 inline-flex rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700"
  >
    开始安装
  </a>
</section>

这个例子里没有单独编写 CSS，但已经包含了容器宽度、内边距、字号、颜色、行高、按钮和 hover 状态。

学习时的关键习惯

先理解设计意图，再组合工具类，不要机械堆 class。
保持间距尺度一致，例如优先使用 4、6、8、12 等常用步长。
遇到重复结构时抽成组件，而不是复制一长串 class。
使用响应式前缀时从移动端默认样式开始，再写 sm:、md:、lg:。
自定义颜色和尺寸应放进主题配置，避免每个页面随意发明新尺度。

常见误区

工具类太多是不是不好维护？

如果页面结构重复，应抽组件；如果样式语义重复，应抽设计 token 或组合类。Tailwind 的维护重点不是“让 class 变少”，而是让样式来源稳定、可复用、可搜索。

是否完全不需要 CSS 文件？

不是。全局字体、第三方组件覆盖、复杂动画和少量基础层样式仍然可以写 CSS。Tailwind 只是把大部分常见样式从手写 CSS 迁移到了工具类组合。

项目会不会生成巨大 CSS？

生产构建会根据内容扫描只生成用到的工具类。配置 content 路径时要覆盖所有模板和组件文件，否则可能出现样式缺失。

实战建议

在真实项目中，可以按以下方式使用 Tailwind：

页面和组件内部使用工具类完成主要样式
设计系统中的颜色、字号、圆角、阴影写入配置
重复的按钮、输入框、卡片抽成组件
对复杂富文本内容使用 typography 插件或专门的内容样式
对深色模式和交互状态建立统一规范

下一步

建议先阅读“基础概念”和“安装”章节，然后用一个小页面练习：导航栏、内容区域、列表卡片和表单按钮。完成后再学习响应式设计和组件复用，你会更快体会 Tailwind 的优势。

#Tailwind CSS 教程

#你将学到什么

#推荐学习顺序

#一个最小示例

#学习时的关键习惯

#常见误区

#工具类太多是不是不好维护？

#是否完全不需要 CSS 文件？

#项目会不会生成巨大 CSS？

#实战建议

#下一步