这份 Tailwind CSS 终极速查手册，涵盖了 v3 和 v4 的核心写法，查完就能用。
1. 布局终极三件套（救急专用）
忘掉复杂的 Flex 和 Grid 单词，记住这三组组合：
| 需求 | 类名组合 | 记忆点 |
|---|
| 水平居中 | flex justify-center items-center | 爹变 flex，主轴+交叉轴居中 |
| 左右撑开 | flex justify-between items-center | 左边一个，右边一个，中间自动隔开 |
| 等宽网格 | grid grid-cols-3 gap-4 | 3 列，间距 4，数字改 cols-1 到 cols-12 |
2. 间距与尺寸（别再记 px 了）
Tailwind 的数字 1 = 4px (0.25rem)。
| 速记 | 数值 | 用途 |
|---|
p-4 / m-4 | 16px | 内/外边距（四边） |
px-6 / py-2 | 左右24px / 上下8px | 经典按钮内边距 |
gap-3 | 12px | Flex/Grid 间隙 |
w-1/2 | 50% | 宽度一半 |
w-full | 100% | 占满父级 |
h-screen | 100vh | 占满屏幕高度 |
3. 文字与颜色（最常用）
| 需求 | 类名 | 备注 |
|---|
| 文字大小 | text-sm / text-base / text-lg / text-2xl | Base 默认 16px，2xl 是 24px |
| 文字粗细 | font-normal / font-medium / font-bold | 400 / 500 / 700 |
| 文字颜色（v3） | text-blue-500 | 500 是中色 |
| 文字颜色（v4 新） | text-blue-500/50 | 直接在后面加 / 透明度，不用写 text-opacity-50 |
| 背景颜色 | bg-gray-100 / bg-white | - |
| 背景透明 | bg-black/50 | v3/v4 都支持，50% 透明黑 |
4. 圆角与边框（美化靠这个）
| 需求 | 类名 | 值 |
|---|
| 大圆角 | rounded-xl 或 rounded-2xl | 12px / 16px |
| 全圆 | rounded-full | 50%，用于头像或胶囊按钮 |
| 边框 | border border-gray-200 | 1px 灰色边框 |
| 边框焦点 | focus:ring-2 focus:ring-blue-400 | 输入框聚焦时发光的环 |
5. 响应式断点（移动优先）
记住：sm 管手机，md 管平板，lg 管笔记本。
写法：{断点}:{类名}，例如 md:flex 表示“在平板上变成 Flex”。
| 断点 | 最小宽度 | 常用场景 |
|---|
sm: | 640px | 手机横屏 |
md: | 768px | 竖屏平板 |
lg: | 1024px | 笔记本/桌面（最常用） |
xl: | 1280px | 大桌面 |
| 默认（不加） | 0px | 手机竖屏（永远先写手机样式） |
6. 状态伪类（交互必备）
| 写法 | 效果 | 例子 |
|---|
hover:类名 | 鼠标悬停 | hover:bg-blue-600 |
focus:类名 | 点击选中 | focus:outline-none（去掉输入框默认蓝边） |
active:类名 | 点击按下瞬间 | active:scale-95（点击缩放动效） |
disabled:类名 | 禁用状态 | disabled:opacity-50 |
7. v3 vs v4 写法对比（避坑）
| 场景 | v3 写法 | v4 写法（新） |
|---|
| 透明度 | bg-black bg-opacity-50 | bg-black/50 （简写） |
| 阴影 | shadow-md | shadow-sm 变小了，老 shadow-sm 变成 shadow-xs |
| 自定义颜色 | 写 tailwind.config.js | 写 CSS 的 @theme { --color-xxx: #fff; } |
| 导入 | @tailwind base; 等三行 | @import "tailwindcss"; （一行） |
8. 万能逃生舱（记不住就靠它）
如果类名没生效，或者要写 CSS 计算值，直接用方括号：
- 任意值：
w-[200px]（宽度 200px）
- 任意颜色：
bg-[#f0f0f0]
- 任意网格：
grid-cols-[200px,1fr]
💡 一句话速记口诀（背下来）
爹是 Flex，子居中；边框灰，圆角大；
手机先写，平板加 md；
要透明，斜杠加；方括号里写天下。
