1. Tailwind CSS 简介：什么是 Utility-First

本节目标：搞懂 Tailwind CSS 是什么、它跟 Bootstrap 那套有什么不同、为什么”工具类优先”这个思路能火。

先来看一段代码。这是一个简单的卡片组件，你猜它用了什么写法：

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="Logo" />
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

没有 .card、.card-body 这种自定义类名，没有跳到 CSS 文件里去写样式——所有东西都堆在 class 属性里。

这就是 Tailwind CSS 的写法。

它到底是个啥

简单说，Tailwind CSS 不提供现成的按钮、导航栏、卡片组件——它给你一大堆”原子级”的 CSS 类，每个类只做一件事：

flex → display: flex
p-6 → padding: 1.5rem
text-xl → font-size: 1.25rem
bg-white → background-color: #fff

你在 HTML 里把这些类拼起来，就拼出了一个完整的组件。

跟传统框架的区别

Bootstrap 那套是”组件优先”：你写 class="btn btn-primary"，样式由框架预定义好。好看是好看，但一旦要定制，就得覆盖样式，越写越痛苦。

Tailwind 反其道而行——不给组件，只给零件。想做个红色圆角按钮？bg-red-500 text-white rounded-lg px-4 py-2，拼起来就行。

维度	Bootstrap 类组件框架	Tailwind CSS
样式来源	预定义组件类	原子工具类组合
定制方式	覆盖 CSS 或改 Sass 变量	直接换类名
输出体积	引入整棵树（按需需额外配置）	只打包你用过的类
设计自由度	受限于组件 API	几乎无限

为什么有人爱它

写完 HTML 不用切到 CSS 文件。样式跟着元素走，删掉元素就删掉了样式，不存在”这个 CSS 还有没有人用”的猜疑链。

改东西也安全。加一个 hover:bg-sky-700 只影响当前元素，不用担心把其他页面的按钮也改了。

项目大了 CSS 文件不会无限膨胀。工具类都是复用的，新增功能不会让 CSS 文件线性增长。

为什么不习惯的人觉得难受

刚上手最直观的感受：class 属性好长。一个按钮可能有十几个类名，看着眼花。

这是事实。但用熟了你会发现，这些类名都是有规律的——颜色、尺寸、状态，一套命名规则走遍天下。比记那些自定义的 .wrapper-inner-active 好猜多了。

Tip

装个 VS Code 插件 Tailwind CSS IntelliSense，写类名的时候有自动补全，根本不用背。后面第 8 章会讲怎么配。

版本说明

当前教程基于 Tailwind CSS v4.3.3（2026 年 7 月发布）。v4 跟 v3 差异不小，如果你在网上搜到 @tailwind base; @tailwind components; 这种写法，那是 v3 的，v4 已经改成了 @import "tailwindcss";。

下一章我们展开讲 v4 到底新在哪。