样式：Tailwind 集成

Tailwind 是什么

"把所有 CSS 都做成预设的 class，组件里直接用 class 名字写样式。"

// 传统 CSS
<div className="card">
    <h1 className="title">Hello</h1>
</div>

// + 单独 CSS 文件
.card { padding: 16px; border: 1px solid gray; border-radius: 8px; }
.title { font-size: 24px; font-weight: bold; }

// Tailwind
<div className="p-4 border border-gray-300 rounded-lg">
    <h1 className="text-2xl font-bold">Hello</h1>
</div>
// 不用写 CSS 文件

Tailwind 优势

不用想 class 名字（title-section-2-large-blue-bold 这种）
CSS 文件不膨胀（只生成用到的）
响应式 / 状态 / dark mode 都是修饰前缀
AI 工具友好（v0 / shadcn 全用 Tailwind）

Next.js 已经配好

create-next-app 时选了 Tailwind → 已经能用。验证：

export default function Page() {
    return (
        <div className="p-8 bg-blue-100 text-blue-900">
            Hello Tailwind
        </div>
    );
}

跑 npm run dev 应该看到蓝色背景。

核心 class 速查

间距

p-4       padding: 1rem (16px)
px-4      左右 padding
py-2      上下 padding
m-4       margin
mt-2      margin-top
mx-auto   水平居中

数字含义：1 = 0.25rem，4 = 1rem (16px)，8 = 2rem (32px)。

尺寸

w-full    width: 100%
w-1/2     50%
h-screen  height: 100vh
max-w-md  max-width: 28rem

颜色

bg-red-500       背景
text-blue-600    文字
border-gray-300  边框

颜色级别：50 100 200 ... 900 950（越大越深）。

字体

text-xs / sm / base / lg / xl / 2xl ... 9xl
font-thin / light / normal / medium / semibold / bold / black
italic / underline / line-through
text-center / left / right
leading-tight / normal / relaxed

边框 / 圆角

border           1px 边框
border-2         2px
border-blue-500  颜色
rounded          稍圆
rounded-lg       更圆
rounded-full     全圆（头像 / 按钮）

阴影

shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl

Flexbox

flex                display: flex
flex-col            垂直
items-center        垂直居中
justify-center      水平居中
gap-4               flex 项之间空隙
flex-1              flex-grow: 1

Grid

grid grid-cols-3    3 列等宽
gap-4
col-span-2          占 2 列

响应式（移动优先）

<div className="text-sm md:text-base lg:text-lg">
    {/* 手机：sm；md+ 屏：base；lg+ 屏：lg */}
</div>

断点：

sm:   ≥ 640px
md:   ≥ 768px
lg:   ≥ 1024px
xl:   ≥ 1280px
2xl:  ≥ 1536px

状态修饰

<button className="bg-blue-500 hover:bg-blue-700 active:bg-blue-900">
    Click
</button>

<input className="border focus:border-blue-500 focus:outline-none" />

<div className="opacity-50 hover:opacity-100" />

暗色模式

<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
    Content
</div>

tailwind.config.ts 加 darkMode: 'class'，然后 root 元素加 / 去 class="dark" 来切换。

实用例子

卡片

<div className="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
    <h2 className="text-xl font-bold mb-2">Card Title</h2>
    <p className="text-gray-600 dark:text-gray-400">Card content goes here.</p>
</div>

按钮

<button className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">
    Click me
</button>

<nav className="flex items-center justify-between p-4 bg-white shadow">
    <h1 className="text-xl font-bold">Logo</h1>
    <div className="flex gap-4">
        <a href="/about" className="hover:text-blue-600">About</a>
        <a href="/blog" className="hover:text-blue-600">Blog</a>
    </div>
</nav>

比写 CSS 慢吗

刚开始会——查 class 名 + 记数字。

但：

VS Code 装 Tailwind IntelliSense 后自动补全
写多了所有数字 / 颜色级别 / 修饰前缀都熟
不用思考类名 → 实际更快

shadcn/ui：现成组件

npx shadcn@latest init
npx shadcn@latest add button card dialog

shadcn 把组件代码复制到你项目里——你能改，不是依赖。配 Tailwind 用。

坑

类名只能字面写——动态拼接 Tailwind 不识别：

// ❌ Tailwind 不会包含 bg-${color}-500
<div className={`bg-${color}-500`}>

// ✓ 完整字面值映射
const colorMap = { blue: 'bg-blue-500', red: 'bg-red-500' };
<div className={colorMap[color]}>

太多 class 时考虑用 clsx 库管理条件类
自定义颜色 / 字体 → tailwind.config.ts 配 theme.extend

下一篇：路由（App Router）。