Tailwind CSS 简介

写CSS最痛苦的是什么？

改一个按钮颜色，要在CSS文件里翻半天；写个响应式布局，媒体查询写得手抽筋；换个主题，满屏的#3b82f6要一个个替换……

Tailwind CSS 就是为了解决这些痛点而生的。

为什么选择 Tailwind

传统写CSS，是先写HTML结构，再写CSS样式，然后在两个文件之间来回切换。改个样式要记住类名，改完还要刷新看效果。

Tailwind 的思路不一样——直接在HTML里写样式。不用起类名，不用切文件，所见即所得。

<!-- 传统方式 -->
<button class="btn-primary">提交</button>

<!-- Tailwind 方式 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  提交
</button>

看起来类名有点长？确实。但好处是：

不用起名字了——btn-primary、submit-button、form-submit-btn……起类名是程序员最头疼的事之一。

不用找样式了——改按钮颜色？直接看HTML，一目了然。

不用写CSS了——Tailwind 提供了所有常用样式，组合就行。

什么是 Tailwind CSS

Tailwind CSS 是一个**功能类优先（utility-first）**的 CSS 框架。

功能类是什么

功能类就是只做一件事的 CSS 类。

.text-center { text-align: center; }
.text-red-500 { color: #ef4444; }
.p-4 { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }

每个类只负责一个样式属性。这就是"原子化"——把样式拆成最小的原子单位。

传统 CSS 是这样写的：

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Tailwind 是这样写的：

<div class="bg-white rounded-lg p-4 shadow">
  <h3 class="text-lg font-bold mb-2">标题</h3>
</div>

没有自定义的类名，全是 Tailwind 提供的工具类。

设计系统

Tailwind 不仅仅是一堆 CSS 类，它是一整套设计系统。

颜色系统——从 50 到 950，每个颜色 11 个色阶：

blue-50   #eff6ff  最浅
blue-100  #dbeafe
blue-500  #3b82f6  标准蓝
blue-950  #172554  最深

间距系统——基于 4px 的倍数：

p-1  → 4px
p-2  → 8px
p-4  → 16px

字体大小——从 xs 到 9xl：

text-xs    → 12px
text-base  → 16px
text-lg    → 18px

这套系统让设计保持一致性，不用每次都纠结"这个间距用多少像素"。

核心特性

响应式设计

<!-- 手机上全宽，平板上一半，电脑上三分之一 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式内容
</div>

状态变体

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 active:bg-blue-900">
  按钮
</button>

暗黑模式

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  内容
</div>

与传统 CSS 框架对比

选 CSS 框架就像选工具，没有最好的，只有最适合的。

Bootstrap

Bootstrap 提供的是组件——按钮、卡片、导航栏，拿来就能用。

<!-- Bootstrap -->
<button class="btn btn-primary">按钮</button>

<!-- Tailwind -->
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  按钮
</button>

CSS-in-JS

React 生态流行的方案：

// CSS-in-JS
const Button = styled.button`
  background: #3b82f6;
  &:hover { background: #2563eb; }
`;

// Tailwind
const Button = () => (
  <button className="bg-blue-500 hover:bg-blue-600">按钮</button>
);

选择建议

• 快速原型：选 Bootstrap
• 企业级产品：选 Tailwind
• React 项目：Tailwind 或 CSS-in-JS
• 个人博客：都可以，甚至手写 CSS

原子化 CSS 理念

原子化 CSS（Atomic CSS）不是 Tailwind 发明的，但 Tailwind 让它流行起来了。

为什么选择原子化

传统 CSS 项目会经历这样的过程：

.button { padding: 8px 16px; }
.button-primary { padding: 8px 16px; background: blue; }
.button-large { padding: 16px 32px; background: blue; }

padding: 8px 16px 写了多遍。随着项目变大，重复越来越多。

原子化解决复用问题：

<button class="px-4 py-2 bg-blue-500">Primary</button>
<button class="px-4 py-2 bg-gray-500">Secondary</button>
<button class="px-8 py-4 bg-blue-500">Large</button>

px-4 py-2 复用了，不需要写新 CSS。

原子化的优势

不用起名字——起类名是程序员最痛苦的事之一。

样式局部化——每个类只做自己的事，不会互相干扰。

删除安全——删除元素，样式自然没了，不会有死代码。

响应式简单：

<!-- 传统方式 -->
<style>
.container { width: 100%; }
@media (min-width: 768px) { .container { width: 50%; } }
</style>

<!-- 原子化 -->
<div class="w-full md:w-1/2">...</div>

原子化的争议

"HTML 变丑了"——确实，类名会很长。但这是丑在明处，传统 CSS 的复杂性藏在文件里。

"重复的类名"——提取成组件就行：

const Button = ({ children }) => (
  <button class="px-4 py-2 bg-blue-500 text-white rounded">
    {children}
  </button>
);

学习建议

Tailwind 上手很快，但要用好需要一些技巧：

1. 先熟悉命名规律——text-lg、p-4、m-2，有规律可循
2. 善用编辑器插件——VS Code 的 Tailwind CSS IntelliSense 插件必装
3. 多看官方文档——Tailwind 文档写得很好，例子丰富
4. 实践出真知——动手写几个组件，比看十遍教程都有用

小结

Tailwind CSS 是一个工具类优先的 CSS 框架，它：

• 提供原子化的工具类
• 内置完整的设计系统
• 支持响应式、状态变体、暗黑模式
• 按需生成，文件体积小

它不提供现成组件，而是给你构建组件的能力。学习曲线平缓，上手快，但要写好需要理解其设计理念。

Tailwind 的优势在于：在灵活性和效率之间找到了平衡点。既不像 Bootstrap 那样死板，也不像手写 CSS 那样费事。