Tailwind CSS 是什么？它和传统 CSS 框架有什么区别？
如果你第一次看到 Tailwind CSS 写出来的 HTML，大概率会愣一下：一个按钮上怎么塞了这么多 class？
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">保存</button>
这就是 Tailwind CSS 的核心思路：不先写一个 .btn-primary，而是直接用一组小颗粒度的工具类把样式拼出来。它不是 Bootstrap 那种“拿来就有按钮、卡片、导航栏”的组件框架，而是一套 utility-first CSS 工具箱。
Tailwind CSS 是什么？
Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架。它提供大量原子化 class，比如 p-4、flex、text-sm、bg-blue-600、rounded-lg，每个 class 通常只负责一件很小的事。
传统写法通常是这样：
.card-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
Tailwind 写法更像这样：
<h2 class="mb-3 text-xl font-bold">标题</h2>
你不需要先想 .card-title、.main-title、.title-large 哪个名字更合适，直接把字号、间距、字重写在元素上。
utility-first 到底是什么意思？
utility-first 不是“不要 CSS”，而是优先使用工具类完成大多数样式。一个卡片可以这样写：
<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm"> <h3 class="text-lg font-semibold text-gray-900">Tailwind CSS</h3> <p class="mt-2 text-sm leading-6 text-gray-600">用工具类组合界面，而不是套用预制组件。</p> </div>
每个 class 都很直白，看到 mt-4 就知道是上边距，看到 text-gray-600 就知道是灰色文字，不用再去找某个 class 背后到底写了什么 CSS。
Tailwind CSS 是怎么工作的？
Tailwind 会扫描你的 HTML、JS、TS、Vue、React 组件等文件，找到实际用到的 class，然后生成对应 CSS。Tailwind v3 默认使用 JIT；Tailwind v4 则换成新的编译引擎，安装和配置更轻。
v4 配合 Vite 可以这样安装：
npm install tailwindcss @tailwindcss/vite
import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [tailwindcss()] })
主 CSS 中引入：
@import "tailwindcss";
v3 的经典方式则是 npx tailwindcss init，配置 content，再在 CSS 里写 @tailwind base; @tailwind components; @tailwind utilities;。
常用 Tailwind 类名有哪些？
间距：m-4、p-6、mt-8、gap-4。颜色：bg-blue-600、text-white、text-gray-700。布局：flex、items-center、justify-between、grid、grid-cols-3。尺寸和边框：w-full、max-w-3xl、rounded-lg、border、shadow-md。
响应式写法是在类名前加断点前缀：
<div class="w-full md:w-1/2 lg:w-1/3"></div>
状态样式也用前缀：
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 active:bg-blue-800">提交</button>
深色模式常见写法是 dark:：
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">内容</div>
Tailwind CSS 和 Bootstrap 有什么区别？
| 对比项 | Tailwind CSS | Bootstrap / 传统 CSS 框架 |
|---|---|---|
| 核心思路 | 提供工具类，自己组合界面 | 提供预制组件和样式规范 |
| 按钮、卡片、导航 | 默认不提供完整组件 | 默认提供现成组件 |
| 设计自由度 | 高，不容易撞脸 | 中，默认样式辨识度强 |
| 上手速度 | 需要熟悉类名体系 | 复制组件即可用 |
| 定制成本 | 适合做自有设计系统 | 深度改样式时容易覆盖 CSS |
| 适合项目 | 产品后台、SaaS、设计定制强的前端项目 | 快速原型、内部工具、样式要求不高的页面 |
如果想快速搭一个“能用就行”的后台页面，Bootstrap 很省事。如果有自己的视觉规范，或者不想让页面长得像默认模板，Tailwind 更灵活。
Tailwind 什么时候值得用？
Tailwind 适合组件化框架项目、定制视觉强的产品、页面迭代快的团队，以及想用一套设计令牌约束颜色、字体、圆角、间距的项目。
它不太适合只写一两个静态页面、团队完全不熟悉工具类写法、已有成熟 CSS 体系且迁移收益不明显的项目。Tailwind 本身不是组件库，如果需要完整组件，可以搭配 Headless UI、Radix UI、shadcn/ui 等方案。
Tailwind 的缺点和最佳实践
Tailwind 最大的争议是 class 太长。解决办法是把重复 UI 抽成组件，而不是到处复制同一串 class。@apply 可以少量使用，但如果大量用它把工具类提取回 CSS，最后会变成“用 Tailwind 重新写了一套传统 CSS”。
还要避免过度动态拼接 class：
const className = `text-${color}-600`
Tailwind 的扫描依赖可识别的类名，更稳的方式是把可能值列出来：
const colorMap = { success: 'text-green-600', danger: 'text-red-600' }
Tailwind CSS 的价值，是用一套统一的工具类和设计 token 快速搭界面。它和 Bootstrap 最大的区别是：Bootstrap 偏“拿组件来用”，Tailwind 偏“拿工具类来搭”。如果团队能接受 class 较长的写法，并愿意把重复 UI 抽成组件，Tailwind 会让日常改样式变得很快。