tailwind 速记

这份 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； 要透明，斜杠加；方括号里写天下。