什么是 Tailwind CSS
01. 什么是 Tailwind CSS
1. 定义
Tailwind CSS是一个原子化 CSS 框架（Utility-First CSS Framework）。
简单说：它提供了一堆可以直接写在 HTML 类名里的小工具类，让你不用写 CSS 代码，就能快速搭建界面。
<!-- 传统 CSS 写法：需要写 CSS 文件 --><divclass="card">...</div><style>.card{background-color:white;border-radius:8px;padding:16px;box-shadow:0 1px 3pxrgba(0,0,0,0.1);}</style><!-- Tailwind 写法：直接在 HTML 里写工具类 --><divclass="bg-white rounded-lg p-4 shadow-sm">...</div>2. 核心理念
传统 CSS 方式
/* 定义语义化类名，然后写样式 */.button-primary{background-color:blue;color:white;padding:8px 16px;border-radius:4px;}问题：
- 需要起名字（命名困难）
- 样式和 HTML 分离（来回跳转）
- 文件越来越大（难以维护）
- 修改样式影响未知（全局污染）
Tailwind 方式
<buttonclass="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. 开发效率高
<!-- 一行搞定一个卡片 --><divclass="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"><h2class="text-xl font-bold mb-2">标题</h2><pclass="text-gray-600">描述文字</p></div>2. 不用担心类名冲突
- 没有
.card、.container这种通用类名 - 每个类都是唯一的工具类
3. 无需切换文件
- HTML 和样式在一起
- 不用在
.html和.css之间来回跳
4. 只生成用到的样式
- 生产环境会自动删除没用到的类
- 最终 CSS 文件很小
5. 响应式设计简单
<!-- 手机：1列，平板：2列，电脑：4列 --><divclass="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">...</div>6. 暗色模式
<!-- 暗色模式下背景变黑 --><divclass="bg-white dark:bg-gray-900">...</div>6. 缺点
1. HTML 看起来"臃肿"
<!-- 类名确实比较多 --><divclass="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. 快速开始
练习
尝试理解下面这段代码的效果：
<divclass="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"><divclass="md:flex"><divclass="md:shrink-0"><imgclass="h-48 w-full object-cover md:h-full md:w-48"src="/image.jpg"alt="图片"></div><divclass="p-8"><divclass="uppercase tracking-wide text-sm text-indigo-500 font-semibold">标签</div><h2class="mt-1 text-xl font-medium text-black">标题</h2><pclass="mt-2 text-gray-500">描述文字，这是一段示例内容。</p></div></div></div>这段代码实现了一个响应式卡片：手机版竖排，电脑版横排。