Tailwind 简介与 v4 新特性

1. 什么是 utility-first CSS

在传统 CSS 开发中，我们习惯先给 HTML 元素起一个语义化类名（如 .card、.header-nav），再在独立的 CSS 文件中为这个类名编写样式。这种做法看似整洁，但随着项目扩大，会产生大量只用一两次的类名，CSS 文件越来越臃肿，修改一个组件需要同时维护两个文件。

utility-first（工具类优先）是另一种思路：不再创建自定义类名，而是直接在 HTML 中组合预定义的原子工具类。每个工具类只做一件事：p-4 表示 padding: 1rem，text-lg 表示 font-size 较大，bg-blue-500 表示蓝色背景。

传统 CSS vs utility-first 对比

/* ── 传统写法：需要维护两个文件 ── */

/* style.css */
.chat-notification {
  display: flex;
  max-width: 24rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.chat-notification-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a202c;
}

<!-- index.html -->
<div class="chat-notification">
  <h4 class="chat-notification-title">消息通知</h4>
</div>

<!-- Tailwind utility-first 写法：样式直接在 HTML 中 -->
<div class="flex max-w-sm p-6 rounded-lg bg-white shadow-md">
  <h4 class="text-xl font-semibold text-gray-900">消息通知</h4>
</div>

2. v3 → v4 重大变化

Tailwind CSS v4 于 2025 年发布，是该框架历史上最大的架构重构。核心变化体现在三个方面：

• 配置方式 v3 使用 tailwind.config.js（JavaScript 配置文件）。v4 改为 CSS-first 配置：直接在 CSS 中用 @theme 指令定义设计 token，不再需要 JS 配置文件。
• 引入方式 v3 需要 @tailwind base; @tailwind components; @tailwind utilities; 三行指令。v4 简化为一行：@import "tailwindcss"。
• 构建引擎 v3 使用 PostCSS 插件 + JIT 引擎。v4 引入全新 Oxide 引擎（基于 Rust + Lightning CSS），全量构建速度提升 5 倍，增量构建提升 100 倍。
• CSS 变量 v4 将所有 design token 暴露为 CSS 自定义属性（CSS Variables），可在任何 CSS 中直接引用，如 color: var(--color-blue-500)。
• 容器查询 v4 内置原生 @container 支持，v3 需要安装 @tailwindcss/container-queries 插件。

v3 vs v4 配置文件对比

// ── v3：tailwind.config.js（JavaScript）──
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#06B6D4',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

/* ── v4：直接在 CSS 中配置（@theme 指令）── */
@import "tailwindcss";

@theme {
  --color-brand: #06B6D4;
  --font-sans: 'Inter', sans-serif;
  --spacing-18: 4.5rem;
}

3. 安装方式

Tailwind v4 提供三种安装方式，推荐使用 Vite 插件——最快、最简单。

方式一：Vite 插件（推荐）

1. 创建 Vite 项目（或使用已有项目）
   npm create vite@latest my-app -- --template vanilla
2. 安装 Tailwind CSS v4 和 Vite 插件
   npm install tailwindcss @tailwindcss/vite
3. 在 vite.config.js 中注册插件
4. 在入口 CSS 文件中添加一行

// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),   // 就这一行！
  ],
})

/* src/style.css —— 入口 CSS */
@import "tailwindcss";   /* 一行搞定，v4 无需三行指令 */

方式二：PostCSS 插件

# 安装依赖
npm install tailwindcss @tailwindcss/postcss postcss

# postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

方式三：CDN 快速体验

<!-- 在 HTML head 中引入 CDN（仅用于学习/原型，不建议生产使用）-->
<script src="https://cdn.tailwindcss.com?v=4"></script>

4. 第一个 Tailwind 页面

安装完成后，直接在 HTML 中使用工具类编写样式，无需编写任何自定义 CSS。下面是一个典型的卡片组件示例：

<!-- 一个完整的卡片组件，纯 Tailwind 工具类 -->
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-8">
  <div class="bg-white rounded-2xl shadow-lg p-8 max-w-md w-full">

    <!-- 头部：图标 + 标题 -->
    <div class="flex items-center gap-4 mb-6">
      <div class="w-12 h-12 bg-cyan-500 rounded-xl flex items-center justify-center">
        <span class="text-white text-xl">🎨</span>
      </div>
      <div>
        <h2 class="text-xl font-bold text-gray-900">Tailwind CSS v4</h2>
        <p class="text-sm text-gray-500">utility-first CSS 框架</p>
      </div>
    </div>

    <!-- 内容区 -->
    <p class="text-gray-600 text-sm leading-relaxed mb-6">
      无需离开 HTML 编写样式，组合原子类即可构建任意界面。
    </p>

    <!-- 标签 -->
    <div class="flex gap-2 mb-6">
      <span class="px-3 py-1 bg-cyan-100 text-cyan-700 text-xs rounded-full font-medium">v4</span>
      <span class="px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full font-medium">JIT</span>
    </div>

    <!-- 按钮 -->
    <button class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-semibold
                   py-3 rounded-xl transition-colors duration-200">
      开始学习
    </button>
  </div>
</div>

5. v4 的 CSS 变量系统

v4 的一大特色是将所有 design token 自动暴露为 CSS 自定义属性。这意味着你可以在任何 CSS 或内联样式中直接使用 Tailwind 的调色板：

/* v4 自动生成的 CSS 变量（部分示例）*/
:root {
  --color-cyan-500: oklch(0.715 0.143 215.221);
  --color-gray-900: oklch(0.21 0.006 285.885);
  --spacing-4: 1rem;
  --radius-xl: 0.75rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
}

/* 在自定义 CSS 中直接使用 */
.my-component {
  color: var(--color-cyan-500);
  padding: var(--spacing-4);
}