Tailwind CSS 教程

本教程是 Tailwind CSS 的完整 12 篇入门系列,面向零基础初学者。从环境安装、utility-first 思想一路讲到响应式、状态前缀、自定义配置与组件抽取,每一篇都配有可运行的代码示例。

Tailwind CSS 是加拿大工程师 Adam Wathan 在 2017 年开源的 CSS 框架,如今已是新项目最主流的 CSS 方案之一。它用一个全新的"原子化工具类"理念,重新定义了"怎么写 CSS"——不再起类名、不再切换 HTML/CSS 文件、不再为命名冲突头疼,所有样式就地写在元素上。

先看一段 Tailwind 代码

下面是一个产品卡片的写法,先感受一下它的样子:

<div class="max-w-sm mx-auto p-6 bg-white rounded-xl shadow-md
                hover:shadow-lg transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900">Hello Tailwind</h3>
  <p class="mt-2 text-sm text-gray-500">
    一行 class 搞定卡片样式,无需另写 CSS。
  </p>
</div>

全部 11 篇子教程

建议按顺序学习,每天 1~2 篇,一周即可入门。

1. Tailwind CSS 简介 — 历史、设计哲学与应用场景
2. 环境安装与配置 — CDN、PostCSS、Tailwind CLI 三种方式
3. Utility-first 原子化思想 — 工具类理念与传统 CSS 对比
4. 间距与尺寸 — padding/margin、width/height 与 4px 比例尺
5. Flexbox 与 Grid 布局 — flex、grid、居中、对齐套路
6. 颜色与背景 — 调色板、色阶、bg/text/border 系列
7. 字体与排版 — 字号、字重、行高、字间距
8. 响应式设计 — sm/md/lg/xl 移动优先断点
9. 状态前缀 — hover/focus/group-hover/dark
10. 自定义配置 — tailwind.config.js 主题扩展
11. 抽取组件 — @apply、@layer 与抽取时机

推荐学习路径

如果你是完全的零基础,建议按下面 4 个阶段推进:

• 阶段 1 打地基:简介 → 环境安装 → utility-first。先理解 Tailwind 为什么这样设计,再能在本地跑起来。
• 阶段 2 核心类:间距尺寸 → 布局 → 颜色背景 → 字体。掌握最高频的几类工具类,能拼出 80% 的页面。
• 阶段 3 进阶:响应式 → 状态前缀。让页面适应不同屏幕和交互态。
• 阶段 4 工程化:自定义配置 → 组件抽取。把 Tailwind 改造成团队的设计系统。

每篇都建议你边读边敲:把示例代码复制到本地,改一改、刷新页面看效果。前端是"手艺活",光看不练记不住。

开始学习

准备好了吗?从第一篇开始 → Tailwind CSS 简介