# 初识 Tailwind——从零开始的样式之旅

## 概述

写 CSS 的时候，你是否遇到过这些问题：

- 想一个类名想半天
- 切换文件来回去找样式在哪
- 改了一个地方的样式，其他地方跟着乱了

**Tailwind CSS** 就是来解决这些问题的。

它不像 Bootstrap 那样给你预制好组件。它提供的是**细粒度的工具类（utility classes）**——每个类只做一件事，比如 `text-center` 只控制居中，`mt-4` 只控制上边距。

你用这些工具类在 HTML 里直接拼出想要的样式，不用写一行自定义 CSS。

> [!info] 说明
> 本文和整个系列都基于 **Tailwind CSS v4**。v4 是一次重大升级，配置方式从 JavaScript 迁移到了 CSS 中，更加简洁。

## 为什么用 Tailwind

### 不用想类名

传统 CSS 要反复给元素起名：

```html
<div class="card-wrapper">
  <div class="card-header">
    <h2 class="card-title">标题</h2>
  </div>
</div>
```

用 Tailwind，直接在 HTML 里组合工具类：

```html
<div class="rounded-lg border p-6 shadow-sm">
  <h2 class="text-lg font-bold">标题</h2>
</div>
```

不用离开 HTML 文件，就能完成所有样式。

<iframe width=100% src="https://api.papergate.top/public/project-display/render/8dc79262e652?prefix=%E5%8D%9A%E5%AE%A2%E6%BC%94%E7%A4%BA%2FTailwind%20CSS%2F" frameborder=0 allowfullscreen height=78></iframe>

### 样式是全局一致的

Tailwind 有一套**设计系统**，颜色、间距、字号、阴影都有固定的取值范围。

你不是在选 `padding: 18px`，而是在选 `p-4`（对应 `1rem` / 16px）。所有元素的间距都来自同一个尺度，页面看起来就整齐、统一。

### 小体积

用 Tailwind 写完后，构建工具会自动**去除未使用的 CSS（tree-shaking）**。最终产出的 CSS 文件通常只有几 KB，而不是几百 KB。

## Tailwind v4 的新变化

v4 最大的变化是：**CSS-first 配置**。

| 对比         | v3                                    | v4                      |
| ---------- | ------------------------------------- | ----------------------- |
| 配置方式       | `tailwind.config.js`                  | `@theme` 指令（CSS 中）      |
| 引入方法       | `@tailwind base/components/utilities` | `@import "tailwindcss"` |
| PostCSS 插件 | `tailwindcss`                         | `@tailwindcss/postcss`  |
| Vite 插件    | 无官方插件                                 | `@tailwindcss/vite`     |

> [!tip] 提示
> 如果你用过 v3，不用担心——核心工具类基本没变，`text-center`、`flex`、`p-4` 这些写法完全一样。变化的只是安装和配置方式。

## 安装 Tailwind v4

以最常见的 **Vite + Tailwind** 组合为例，只需三步。

**第一步：创建 Vite 项目并安装**

```bash
npm create vite@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/vite
```

**第二步：配置 Vite 插件**

`vite.config.ts`：

```typescript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})
```

**第三步：在 CSS 中引入 Tailwind**

在你的主 CSS 文件（比如 `src/style.css`）中写一行：

```css
@import "tailwindcss";
```

这就完成了。没有配置文件，没有 PostCSS 模板，没有复杂的构建步骤。

> [!example] 说明
> 如果你是纯 HTML 项目，也可以用 **Play CDN** 快速试用 Tailwind：
> ```html
> <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
> ```
> 这种方式适合原型验证，生产环境还是推荐 Vite 方式。

## 第一个例子

来看一个实际的例子。下面是用 Tailwind 工具类拼出来的一个卡片：

```html
<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-xl shadow-lg">
  <div class="flex items-center gap-4">
    <img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/48" alt="头像" />
    <div>
      <h2 class="text-xl font-bold text-gray-800">张三</h2>
      <p class="text-sm text-gray-500">全栈工程师</p>
    </div>
  </div>
  <p class="mt-4 text-gray-600 leading-relaxed">
    热爱前端开发，专注 Vue 和 Tailwind CSS。
  </p>
  <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
    联系我
  </button>
</div>
```

这段 HTML 不需要任何自定义 CSS，就已经有一个设计完整的卡片了。

<iframe width=100% src="https://api.papergate.top/public/project-display/render/a5f74b733313?prefix=%E5%8D%9A%E5%AE%A2%E6%BC%94%E7%A4%BA%2FTailwind%20CSS%2F" frameborder=0 allowfullscreen height=234></iframe>

每个工具类的含义：

| 类名                                | 作用                        |
| --------------------------------- | ------------------------- |
| `max-w-sm`                        | 最大宽度 24rem（384px）         |
| `mx-auto`                         | 水平居中                      |
| `mt-10` / `mt-4`                  | 上边距 2.5rem / 1rem         |
| `p-6`                             | 内边距 1.5rem                |
| `bg-white` / `bg-blue-600`        | 背景色                       |
| `rounded-xl` / `rounded-full`     | 圆角                        |
| `shadow-lg`                       | 大阴影                       |
| `flex` + `items-center` + `gap-4` | Flex 布局，居中，间距 1rem        |
| `w-12` / `h-12`                   | 宽高 3rem（48px）             |
| `text-xl` / `text-sm`             | 字号                        |
| `font-bold`                       | 加粗                        |
| `text-gray-800` / `text-gray-500` | 文字颜色                      |
| `leading-relaxed`                 | 宽松行高                      |
| `px-4` / `py-2`                   | 水平内边距 1rem / 垂直内边距 0.5rem |
| `hover:bg-blue-700`               | 鼠标悬停时变暗                   |
|                                   |                           |

注意到最后一行的 `hover:` 前缀。这是 Tailwind 的**状态变体（variant）**机制。`hover:`、`focus:`、`active:`、`dark:` 这些前缀可以加在任意工具类前，表示在特定状态下应用这个样式。

---

下一步，我们来了解 Tailwind 的**设计体系**——颜色和空间是怎么组织的。


---

> 作者: Aphros  
> URL: https://blog.papergate.top/posts/01.%E5%88%9D%E8%AF%86-tailwind%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E7%9A%84%E6%A0%B7%E5%BC%8F%E4%B9%8B%E6%97%85/