Tailwind CSS：原子化样式实战

这一课你将能做到

1. 用 Tailwind 工具类直接写出常见布局、间距、颜色、字体样式
2. 配置响应式前缀（sm/md/lg）和 dark 模式，一套代码适配多设备
3. 自定义配置文件扩展主题，用 @apply 提取重复样式

为什么要学

传统 CSS 写样式，你需要在 HTML 和 CSS 文件之间来回切换，想一个语义化的类名，然后写一堆规则。Tailwind 的思路完全相反：直接在 HTML 里写原子化工具类，一个类只干一件事（比如 p-4 就是 padding 1rem）。样式即结构，所见即所得。

Tailwind 是目前增长最快的 CSS 框架，被 Vercel、GitHub、OpenAI 等公司采用。它的优势是：不用想类名、样式不冲突、响应式极简、最终 CSS 体积比手写还小（自动 tree-shaking）。

先建立图像

传统 CSS vs Tailwind 的对比：

<!-- 传统 CSS -->
<div class="card">
    <h2 class="card-title">标题</h2>
</div>

<style>
.card { padding: 1.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card-title { font-size: 1.25rem; font-weight: 600; color: #1f2937; }
</style>

<!-- Tailwind -->
<div class="p-6 bg-white rounded-lg shadow-sm">
    <h2 class="text-xl font-semibold text-gray-800">标题</h2>
</div>

Tailwind 把样式内联到 HTML，减少了上下文切换，也避免了「这个类名被谁用了」的困惑。

跟着做

步骤 1：安装与配置

用 Vite + React 项目演示：

npm create vite@latest my-tailwind-app -- --template react
cd my-tailwind-app
npm install

# 安装 Tailwind v4（当前最新）
npm install tailwindcss @tailwindcss/vite

配置 Vite（vite.config.js）：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [react(), tailwindcss()]
});

在 src/index.css 中引入：

@import "tailwindcss";

启动项目：

npm run dev

现在可以在 JSX 里直接用 Tailwind 类了。

步骤 2：基础工具类

function App() {
    return (
        <div className="min-h-screen bg-gray-100 p-8">
            {/* 卡片容器 */}
            <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
                {/* 内边距、文字居中 */}
                <div className="p-6 text-center">
                    {/* 标题：大字号、粗体、深灰色 */}
                    <h1 className="text-2xl font-bold text-gray-900 mb-2">
                        Tailwind 入门
                    </h1>

                    {/* 段落：灰色、行高 */}
                    <p className="text-gray-600 leading-relaxed">
                        用工具类快速构建界面，不用写一行 CSS。
                    </p>

                    {/* 按钮：内边距、背景色、圆角、悬停效果 */}
                    <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                        开始使用
                    </button>
                </div>
            </div>
        </div>
    );
}