Tailwind CSS 教程（完整指南）

Tailwind CSS 教程：从零开始掌握实用的 CSS 框架

你是否曾经在写网页样式时，陷入反复写 class、调整 margin、查找颜色值的循环？是不是每次想改一个按钮的颜色，就得翻遍整个 CSS 文件？如果是，那么 Tailwind CSS 可能就是你一直在寻找的解决方案。

Tailwind CSS 不是传统意义上的 UI 框架，它更像是一套“样式工具箱”。它不提供预设组件，而是让你用类名直接在 HTML 中构建设计。不需要写一行 CSS，就能快速搭建出美观、响应式的页面。这篇文章，就是为你准备的 Tailwind CSS 教程，手把手带你从零开始上手。

什么是 Tailwind CSS？它和传统 CSS 有什么不同？

想象一下，你去装修房子。传统方式是请设计师画图纸，再找工人按图施工，每一步都依赖文档和沟通。而 Tailwind 就像是一个“乐高积木系统”——你不需要设计图，直接从仓库里拿积木（类名），按颜色、形状、大小拼装，就能快速搭出想要的房间。

在传统 CSS 中，你定义类名（如 .btn-primary），然后在 HTML 中引用它。而 Tailwind 把这些样式直接写在 HTML 的 class 属性里，比如：

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
  点击我
</button>

这段代码中：

bg-blue-500：设置背景颜色为蓝色 500 阶
text-white：文字颜色为白色
py-2：上下内边距为 0.5rem（即 8px）
px-4：左右内边距为 1rem（即 16px）
rounded：圆角按钮
hover:bg-blue-600：鼠标悬停时背景变为更深的蓝色

这种写法，叫做“原子化 CSS”（Atomic CSS），即每个类名只负责一个样式属性。它的好处是灵活、可读性强、避免样式冲突。

如何快速搭建 Tailwind CSS 项目？

我们来创建一个完整的 Tailwind 项目。这里使用最主流的 Vite + HTML 方案，适合初学者快速上手。

安装依赖

打开终端，执行以下命令：

mkdir tailwind-demo
cd tailwind-demo

npm init -y

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

注：-p 参数会同时生成 postcss.config.js 和 tailwind.config.js，省去手动配置的麻烦。

配置 Tailwind

打开 tailwind.config.js 文件，修改内容如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",  // 指定 HTML 文件路径
  ],
  theme: {
    extend: {},  // 可扩展自定义主题
  },
  plugins: [],
}

注意：content 字段必须包含你项目中使用 Tailwind 的文件路径，否则样式不会生效。

添加 CSS 引入

创建 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tailwind CSS 教程</title>

  <!-- 引入 Tailwind CSS -->
  <link href="./output.css" rel="stylesheet"/>
</head>
<body class="bg-gray-100 p-4">

  <h1 class="text-2xl font-bold text-center text-blue-700 mb-6">
    欢迎使用 Tailwind CSS
  </h1>

  <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors">
    点击我
  </button>

</body>
</html>

output.css 是 Tailwind 生成的最终样式文件，我们稍后会用 PostCSS 自动生成它。

编译 CSS

在 package.json 的 scripts 中添加以下命令：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "tailwind:watch": "tailwindcss -i ./input.css -o ./output.css --watch"
}

注意：这里我们用 input.css 作为入口，用来引入 Tailwind 的指令。

创建 input.css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

这三行是 Tailwind 的核心指令，分别代表：基础重置、组件定义、原子化样式。

最后，运行命令启动开发服务器：

npm run tailwind:watch

打开浏览器访问 http://localhost:5173，你就能看到一个带有蓝色按钮的页面了。

常用 Tailwind 类名速查表

Tailwind 的类名设计非常有规律，掌握规则后，几乎不用查文档也能猜出效果。

常见样式类别

类名前缀	作用	示例
`bg-*`	背景颜色	`bg-red-400`
`text-*`	文字颜色	`text-gray-800`
`p-*`	内边距	`p-4`（4 个单位）
`m-*`	外边距	`m-2`（2 个单位）
`w-*`	宽度	`w-full`（100%）
`h-*`	高度	`h-16`（16 个单位）
`font-*`	字体粗细	`font-bold`
`rounded-*`	圆角	`rounded-lg`

注：单位是 Tailwind 的“spacing scale”，默认 1 单位 = 0.25rem（4px），所以 p-4 = 1rem = 16px。

响应式设计：为不同屏幕适配

Tailwind 支持响应式类名，通过前缀实现：

<div class="text-center md:text-left lg:text-right">
  这段文字在小屏居中，中屏左对齐，大屏右对齐
</div>

text-center：小屏居中
md:text-left：中等屏幕（≥768px）左对齐
lg:text-right：大屏幕（≥1024px）右对齐

md、lg 是响应式断点，对应屏幕宽度，你可以在 tailwind.config.js 中自定义。

实战案例：构建一个卡片组件

我们来做一个真实可用的卡片组件，包含图片、标题、描述和按钮。

<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden mt-8 transition-transform duration-300 hover:scale-105">
  
  <!-- 图片区域 -->
  <img src="https://via.placeholder.com/300x200" alt="示例图片" class="w-full h-48 object-cover" />

  <!-- 内容区域 -->
  <div class="p-5">
    <h3 class="text-xl font-bold text-gray-900 mb-2">
      优雅的 UI 设计
    </h3>
    <p class="text-gray-600 text-sm leading-relaxed mb-4">
      Tailwind CSS 让样式编写变得简单而高效。无需写 CSS，直接在 HTML 中组合类名。
    </p>
    <button class="bg-blue-500 text-white text-sm py-1 px-3 rounded hover:bg-blue-600 transition-colors">
      阅读更多
    </button>
  </div>

</div>

关键点说明：

max-w-sm：最大宽度 32rem（512px），防止卡片过宽

mx-auto：左右自动居中

shadow-md：中等阴影，增加立体感

object-cover：图片裁剪填充，保持比例

transition-transform duration-300：悬停时缩放动画

hover:scale-105：鼠标悬停放大 5%

这个卡片组件结构清晰、样式统一、响应式良好，完全由类名构成，无需额外 CSS 文件。

自定义主题与扩展

Tailwind 允许你自定义颜色、间距、字体等，满足项目需求。

在 tailwind.config.js 中添加自定义配置：

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {
      colors: {
        primary: '#1a56db',  // 自定义主色
        secondary: '#f59e0b', // 橙色
      },
      spacing: {
        '96': '24rem', // 自定义间距单位
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // 替换默认字体
      },
    },
  },
  plugins: [],
}

之后就可以在 HTML 中使用：

<button class="bg-primary text-white py-2 px-4 rounded">
  自定义主色按钮
</button>

你也可以通过 @layer 在 input.css 中添加自定义样式，实现更复杂的逻辑。

Tailwind CSS 教程总结

Tailwind CSS 并不是“替代 CSS”，而是让你更高效地使用 CSS。它通过原子化类名，将设计决策直接嵌入 HTML，让开发速度提升不止一倍。

无论你是初学者想快速上手前端开发，还是中级开发者希望摆脱繁琐的 CSS 写作，Tailwind 都是一个值得投入的工具。

从今天开始，尝试用 class="bg-blue-500 text-white" 来构建你的第一个按钮，你会发现，原来写样式也可以这么简单。

不要被“不需要写 CSS”吓到——你仍然在写样式，只是换了一种更直观、更可预测的方式。这才是现代前端开发的正确打开方式。

如果你正在寻找一个能让项目快速落地的 CSS 工具，那么 Tailwind CSS 教程，就是你迈出的第一步。