3.4.1 不用想名字的 CSS——Tailwind CSS

一句话破题

Tailwind 用预定义的原子类替代手写 CSS，让你在 HTML 中直接完成样式编写。

核心价值

不再纠结 .card-wrapper、.btn-primary 这样的命名。Tailwind 的类名就是样式本身：bg-blue-500 就是蓝色背景，p-4 就是 16px 内边距。

核心概念速查

间距系统（基于 4px）

类名	值	实际像素
p-1	0.25rem	4px
p-2	0.5rem	8px
p-4	1rem	16px
p-6	1.5rem	24px
p-8	2rem	32px

方向前缀

前缀	含义
p-	四周 padding
px-	左右 padding
py-	上下 padding
pt-/pb-/pl-/pr-	单边
m-	margin（同理）

常用类速查表

布局

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <span>左侧</span>
  <span>右侧</span>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

尺寸

<div class="w-full h-screen">全宽全高</div>
<div class="w-1/2 h-64">50%宽，256px高</div>
<div class="max-w-md mx-auto">最大宽度，水平居中</div>

颜色

<div class="bg-white text-gray-900">白底黑字</div>
<div class="bg-blue-500 text-white">蓝底白字</div>
<div class="border border-gray-200">灰色边框</div>

字体

<p class="text-sm font-medium">小号中等粗细</p>
<p class="text-lg font-bold">大号加粗</p>
<p class="text-gray-500 leading-relaxed">灰色宽松行高</p>

圆角与阴影

<div class="rounded-lg shadow-md">圆角+中等阴影</div>
<div class="rounded-full">完全圆形</div>

状态变体

悬停、焦点、激活

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

暗色模式

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  支持暗色模式
</div>

分组状态

<div class="group">
  <span class="group-hover:text-blue-500">父元素悬停时变色</span>
</div>

响应式断点

Tailwind 采用移动优先策略：

断点	最小宽度	用法
默认	0px	text-sm
sm:	640px	sm:text-base
md:	768px	md:text-lg
lg:	1024px	lg:text-xl
xl:	1280px	xl:text-2xl

<div class="text-sm md:text-base lg:text-lg">
  移动端小字，平板中字，桌面大字
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  响应式网格
</div>

自定义配置

在 tailwind.config.ts 中扩展：

import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
}

export default config

与传统 CSS 对比

传统 CSS

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

Tailwind

<div class="bg-white rounded-lg p-4 shadow-sm">
  内容
</div>

AI 协作指南

核心意图：让 AI 用 Tailwind 类生成样式。

关键术语：flex、grid、gap、p-、m-、rounded、shadow、响应式前缀

交互策略：

1. 描述布局结构（Flex/Grid）
2. 指定间距和尺寸
3. 说明颜色和样式
4. 要求响应式处理

避坑指南

1. 类名顺序：推荐按 布局 → 尺寸 → 间距 → 样式 → 状态 排列
2. 不要混用：尽量只用 Tailwind，避免与传统 CSS 混用
3. 提取重复：重复的类组合可以用 @apply 提取或封装成组件
4. IDE 插件：安装 Tailwind CSS IntelliSense 获得自动补全

验收清单

• [ ] 类名使用正确，样式符合预期
• [ ] 响应式断点设置合理
• [ ] 无冗余的自定义 CSS
• [ ] 颜色使用设计系统中的值