什么是 Tailwind CSS

01. 什么是 Tailwind CSS

1. 定义

Tailwind CSS 是一个原子化 CSS 框架（Utility-First CSS Framework）。

简单说：它提供了一堆可以直接写在 HTML 类名里的小工具类，让你不用写 CSS 代码，就能快速搭建界面。

html 复制代码

<!-- 传统 CSS 写法：需要写 CSS 文件 -->
<div class="card">...</div>

<style>
  .card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
</style>

<!-- Tailwind 写法：直接在 HTML 里写工具类 -->
<div class="bg-white rounded-lg p-4 shadow-sm">...</div>

2. 核心理念

传统 CSS 方式

css 复制代码

/* 定义语义化类名，然后写样式 */
.button-primary {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

问题：

需要起名字（命名困难）
样式和 HTML 分离（来回跳转）
文件越来越大（难以维护）
修改样式影响未知（全局污染）

Tailwind 方式

html 复制代码

<button class="bg-blue-500 text-white px-4 py-2 rounded">按钮</button>

优势：

不用起名字
样式就在 HTML 里
只改一个类名，不影响其他地方
代码量更小

3. 工具类示例

分类	传统 CSS	Tailwind
背景色	`background-color: blue;`	`bg-blue-500`
文字颜色	`color: white;`	`text-white`
内边距	`padding: 16px;`	`p-4`
左右内边距	`padding-left: 16px; padding-right: 16px;`	`px-4`
圆角	`border-radius: 8px;`	`rounded-lg`
阴影	`box-shadow: ...`	`shadow-md`
弹性布局	`display: flex;`	`flex`
居中	`justify-content: center; align-items: center;`	`justify-center items-center`

4. 与传统 CSS 对比

对比项	传统 CSS	Tailwind CSS
学习曲线	低，但精通难	中等，需要记忆类名
开发速度	慢（要写 CSS）	快（直接写类名）
文件大小	随项目增长	固定（只生成用到的）
维护性	差（全局污染）	好（局部影响）
团队协作	类名冲突	无冲突
响应式	需要写媒体查询	内置断点前缀

5. 优点

1. 开发效率高

html 复制代码

<!-- 一行搞定一个卡片 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h2 class="text-xl font-bold mb-2">标题</h2>
  <p class="text-gray-600">描述文字</p>
</div>

2. 不用担心类名冲突

没有 .card、.container 这种通用类名
每个类都是唯一的工具类

3. 无需切换文件

HTML 和样式在一起
不用在 .html 和 .css 之间来回跳

4. 只生成用到的样式

生产环境会自动删除没用到的类
最终 CSS 文件很小

5. 响应式设计简单

html 复制代码

<!-- 手机：1列，平板：2列，电脑：4列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  ...
</div>

6. 暗色模式

html 复制代码

<!-- 暗色模式下背景变黑 -->
<div class="bg-white dark:bg-gray-900">
  ...
</div>

6. 缺点

1. HTML 看起来"臃肿"

html 复制代码

<!-- 类名确实比较多 -->
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow">

解决方案 ：可以使用 @apply 指令提取为组件类

2. 需要记忆类名

初学者需要查文档
IDE 插件可以自动补全（推荐安装）

3. 团队学习成本

团队所有人都要熟悉 Tailwind

7. 适用场景

✅ 适合使用

新项目（从零开始）
原型开发
个人项目
组件化框架项目（React、Vue、Svelte）
需要快速迭代的项目

❌ 不太适合

已有大量 CSS 的老项目（迁移成本高）
复杂的动画效果（需要写自定义 CSS）
团队不愿改变开发习惯

8. 谁在使用 Tailwind

GitHub（新版首页）
Vercel（官网）
Netlify（官网）
Laravel（框架）
Vue.js（新版文档）
Next.js（官方示例）

9. 总结

一句话总结
Tailwind 是在 HTML 里写 CSS，把样式拆成一个个小工具类，组合使用来构建界面

核心理念：原子化（Utility-First）

核心优势：不用命名、不用切文件、响应式简单、暗色模式简单、生产包小

核心劣势：HTML 看起来臃肿、需要记忆类名

10. 下一步

理解了 Tailwind 是什么之后，接下来学习如何安装和使用：

👉 下一节 ：02. 快速开始

练习

尝试理解下面这段代码的效果：

html 复制代码

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/image.jpg" alt="图片">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">标签</div>
      <h2 class="mt-1 text-xl font-medium text-black">标题</h2>
      <p class="mt-2 text-gray-500">描述文字，这是一段示例内容。</p>
    </div>
  </div>
</div>

这段代码实现了一个响应式卡片：手机版竖排，电脑版横排。