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

Aphros 收录于网页开发和 Tailwind CSS

2026-07-24 2026-07-29 约 1400 字预计阅读 3 分钟 - 次阅读 - 条评论

第 1 节概述

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

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

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

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

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

说明

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

第 2 节为什么用 Tailwind

2.1 不用想类名

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

1
2
3
4
5
<div class="card-wrapper">
  <div class="card-header">
    <h2 class="card-title">标题</h2>
  </div>
</div>

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

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

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

2.2 样式是全局一致的

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

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

2.3 小体积

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

第 3 节 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`

提示

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

第 4 节安装 Tailwind v4

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

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

1
2
3
npm create vite@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/vite

第二步：配置 Vite 插件

vite.config.ts：

1
2
3
4
5
6
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

第三步：在 CSS 中引入 Tailwind

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

1
@import "tailwindcss";

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

说明

如果你是纯 HTML 项目，也可以用 Play CDN 快速试用 Tailwind：

1
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

这种方式适合原型验证，生产环境还是推荐 Vite 方式。

第 5 节第一个例子

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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，就已经有一个设计完整的卡片了。

每个工具类的含义：

类名	作用
`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 的设计体系——颜色和空间是怎么组织的。

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

第 1 节 概述

第 2 节 为什么用 Tailwind

2.1 不用想类名

2.2 样式是全局一致的

2.3 小体积

第 3 节 Tailwind v4 的新变化

第 4 节 安装 Tailwind v4

第 5 节 第一个例子

第 1 节概述

第 2 节为什么用 Tailwind

第 4 节安装 Tailwind v4

第 5 节第一个例子