Tailwind CSS Utility-First 思维

背景

传统 CSS 需要给每个元素取 class 名、写 CSS 文件、维护样式表。Tailwind 颠覆了这个模式：用原子化 class 直接在 HTML 中描述样式，大幅提升开发效率。

核心概念

1. Utility-First 哲学

传统 CSS 写法：

/* 需要命名、跳文件、维护 */
.card { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; }
.card-title { font-size: 1.25rem; font-weight: 600; }

Tailwind 写法：

<!-- 直接在 HTML 中描述样式，所见即所得 -->
<div class="bg-white rounded-xl shadow-md p-5">
  <h3 class="text-xl font-semibold">卡片标题</h3>
</div>

2. 设计系统（Design Tokens）

Tailwind 内置了精心设计的设计令牌，保证一致性：

类别	示例 class
间距	p-4(1rem), m-2(0.5rem), gap-6(1.5rem)
颜色	text-blue-500, bg-gray-100, border-red-300
字号	text-xs → text-9xl
圆角	rounded, rounded-xl, rounded-full
阴影	shadow-sm, shadow-md, shadow-xl

3. 响应式设计

<!-- 移动优先：从小到大覆盖 -->
<div class="
  grid
  grid-cols-1        <!-- 手机：1列 -->
  sm:grid-cols-2     <!-- ≥640px：2列 -->
  lg:grid-cols-3     <!-- ≥1024px：3列 -->
  xl:grid-cols-4     <!-- ≥1280px：4列 -->
">

4. 伪类与状态

<button class="
  bg-blue-500 text-white px-4 py-2 rounded
  hover:bg-blue-600           <!-- 悬停 -->
  focus:ring-2 focus:ring-blue-300  <!-- 聚焦 -->
  active:scale-95             <!-- 按下 -->
  disabled:opacity-50         <!-- 禁用 -->
  dark:bg-blue-700            <!-- 暗色模式 -->
">
  提交
</button>

5. 与组件库集成

Tailwind 本身无组件，但可以和以下搭配：

方案	适用框架
Shadcn UI	React/Vue
Headless UI	React/Vue
DaisyUI	任意
Flowbite	任意
Nuxt UI	Nuxt

6. 任意值语法（v3.3+）

<!-- 不用配置，直接写自定义值 -->
<div class="w-[327px] h-[180px] bg-[#FF6B6B] text-[13px]">
</div>

分步操作

# 在任何 Vite 项目中安装
npm install -D tailwindcss @tailwindcss/vite

/* src/index.css — 只需一行 */
@import "tailwindcss";

思考题

1. Tailwind 的 "Tree-Shaking" 如何工作？为什么生产包很小？
2. 什么场景不适合用 Tailwind？
3. 如何用 @layer 组织自定义样式？

毕设搭配推荐

框架	Tailwind 集成方案
React	Shadcn UI / Headless UI
Vue	Nuxt UI / Headless UI
Svelte	Skeleton UI / 原生
纯 HTML	CDN 引入