Tailwind CSS: Tailwind CSS 是什么
如果你写过 CSS，你一定经历过这样的场景：为了一像素的间距问题折腾半小时，为了取一个类名卡住五分钟，为了覆盖某个框架的默认样式翻遍整个样式表……Tailwind CSS 就是来解决这些问题的。它不是又一个 Bootstrap，而是一种全新的写 CSS 的方式。
1. 什么是 Tailwind CSS
Tailwind CSS 是一个实用性优先（Utility-First）的 CSS 框架。它的核心理念是：直接在 HTML 里用预定义的 class 来控制样式，而不是写自定义 CSS。
看个最直观的对比——在页面上放一个蓝色按钮：
▶ 示例：传统CSS vs Tailwind（难度⭐）
传统 CSS 写法：
<style>
.btn-primary {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
.btn-primary:hover {
background-color: #1d4ed8;
}
</style>
<button class="btn-primary">点击我</button>
Tailwind 写法：
▶ 示例：Tailwind 写法（难度⭐）
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base cursor-pointer hover:bg-blue-700">
点击我
</button>
把上面的 Tailwind 代码放入下面的编辑器中，看看效果。
看到区别了吗？在 Tailwind 里，你不需要离开 HTML。所有样式直接通过 class 组合出来——bg-blue-600 是蓝色背景，px-6 是左右内边距，rounded-lg 是大圆角，hover:bg-blue-700 是悬停时变深。
bg-blue-600 只做一件事——设置背景色为蓝色。text-white 只做一件事——设置文字为白色。你需要什么样式，就组合什么 class，像搭积木一样。
2. Tailwind vs 传统框架
(1) vs Bootstrap
Bootstrap 是组件式框架——它提供预先设计好的组件（按钮、导航、卡片、表单），你用一套固定的 HTML 结构来调用它们。问题是：如果你想改样式，就得覆盖 Bootstrap 的 CSS，或者去改 Sass 变量。
| 对比维度 | Bootstrap | Tailwind CSS |
|---|---|---|
| 核心理念 | 提供现成组件 | 提供原子类让你自己搭 |
| 定制难度 | 覆盖默认样式很痛苦 | 随意组合，无需覆盖 |
| 学习曲线 | 学组件名 | 学 CSS 属性对应的 class |
| 最终体积 | 含大量你用不到的样式 | 构建时只保留用到的 |
| 设计自由度 | 所有 Bootstrap 网站看着像 | 每个网站都不一样 |
(2) vs 手写 CSS
| 对比维度 | 手写 CSS | Tailwind CSS |
|---|---|---|
| 命名 | 每写一个样式就要想一个类名 | 不用命名，直接用 class 组合 |
| 文件切换 | HTML 和 CSS 文件之间来回切 | 全在 HTML 里完成 |
| 代码量 | 两套文件，量不小 | 一行 class 搞定 |
| 维护性 | 改样式要去 CSS 里找 | 改样式直接改 HTML 的 class |
| 一致性 | 靠规范约束 | 内置设计系统，自动一致 |
▶ 示例：一个简单的名片卡片（难度⭐）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind 名片示例</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="max-w-xs mx-auto p-6 bg-white rounded-2xl shadow-lg text-center">
<img src="https://i.pravatar.cc/80" alt="头像"
class="w-20 h-20 rounded-full mx-auto mb-3">
<h2 class="text-xl font-bold text-gray-900 mb-1">张三</h2>
<p class="text-sm text-blue-600 mb-2">前端工程师</p>
<p class="text-sm text-gray-500 mb-4">热爱编程，专注于 Web 开发</p>
<button class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer
hover:bg-blue-700 transition-colors">
联系我
</button>
</div>
</body>
</html>
把这段代码保存为 .html 文件，在浏览器里打开——不用装任何东西，直接就能看效果。
3. Tailwind CSS v4 的重要变化
Tailwind CSS v4 于 2025 年 3 月发布，相比 v3 有重大架构升级：
| 变化 | v3 方式 | v4 方式 |
|---|---|---|
| 构建引擎 | JavaScript | Rust（Oxide 引擎），构建快 3.5 倍 |
| CSS 入口 | @tailwind base/components/utilities |
@import "tailwindcss" |
| 配置方式 | tailwind.config.js |
CSS 中的 @theme 指令 |
| 自定义主题 | JS 配置文件 | CSS 原生变量 + @theme |
| 新特性 | — | 容器查询、@starting-style、CSS 嵌套 |
对于初学者来说，v4 最大的感受是配置更简单了——以前需要装一堆 npm 包、写配置文件的场景，现在一行 @import "tailwindcss" 就能搞定。
tailwind.config.js 或者 @tailwind base 之类的写法，那是旧版。我们的教程基于 v4，所有示例都使用最新的写法。
4. 学 Tailwind 前需要什么基础
学习本教程前，你应该已经掌握：
- HTML 基础：知道标签、属性、类名怎么写
- CSS 基础：知道 Flexbox、Grid、盒模型、响应式的基本概念
如果你想不起来这些了，可以先看我们站上的 HTML 教程 和 CSS 教程。有这两个基础，学 Tailwind 基本就是一马平川。
display: flex 是干什么的，建议先去补一下 CSS 基础再回来。
5. 常见应用场景
- 快速原型：从设计稿到能用的页面，Tailwind 是效率最高的方案之一。不用写 CSS、不用命名、不用切文件。
- 个人项目/落地页：一个 HTML 文件 + CDN 就能跑，适合做产品展示页、活动页、个人主页。
- 大型项目：配合组件框架（React/Vue）使用 Tailwind，组件样式完全自包含，没有样式冲突问题。
- 后台管理面板：Tailwind 的间距系统 + Flex/Grid 工具类，搭后台布局比手写 CSS 快几倍。
❓ 常见问题
@apply 提取（后面会讲）；和 React/Vue 组件配合时，class 写在组件文件里，不显得乱。📖 小节
- Tailwind 是一个"实用性优先"的 CSS 框架，通过组合原子 class 来控制样式
- 与 Bootstrap 不同，Tailwind 不提供现成组件，而是提供搭积木的"积木块"
- 传统 CSS 需要命名、切文件、写覆盖，Tailwind 全在 HTML 里完成，效率更高
- v4 基于 Rust 引擎构建，使用
@import "tailwindcss"替代了 v3 的@tailwind指令 - 学 Tailwind 前需要掌握 HTML 和 CSS 基础，它帮你"更好地写 CSS"而不是"代替学 CSS"
- 在 HTML 中引用 CDN 链接（
<script src="https://cdn.tailwindcss.com"></script>）就能快速试用
📝 作业
-
基础题（难度⭐）：找一个你已经写过的 HTML 页面（哪怕是几行文字），在它的
<head>里加上 Tailwind CDN 链接，然后用 Tailwind class 给文字改个颜色和字号。看看效果。 -
进阶题（难度⭐⭐）：用手写 CSS 实现一个简单的卡片组件（至少包含标题、文字、按钮），然后用 Tailwind 重写一遍。比较两种方式的代码量和开发体验。提示：不用追求美观，重点是感受两种写法的差异。
-
挑战题（难度⭐⭐⭐）：打开 https://play.tailwindcss.com/（Tailwind 官方在线 Playground），在左侧编辑器里尝试搭建一个个人简介页面，包含：头像（圆形）、姓名（大号加粗）、简介文字（灰色）、三个技能标签（圆角浅色背景）、一个按钮。全部用 Tailwind class 完成，不用写一行自定义 CSS。
