Tailwind CSS 完整类名对照表（中文版）

> 本文基于 Tailwind CSS 官方文档及实战总结，适合前端开发者快速查阅。

---

📖 目录

1. 布局与容器类
2. 间距类
3. 尺寸类
4. 字体与文本类
5. 背景类
6. 边框类
7. 效果类
8. 交互与状态类
9. 响应式前缀
10. 暗色模式前缀
11. 颜色系统速查
12. 实战代码示例
13. 学习建议

---

一、布局与容器类

功能	类名示例	中文说明	常用值
宽度	w-full	宽度 100%	w-1/2 (50%), w-1/3 (33.33%), max-w-3xl, min-w-0
高度	h-screen	高度占满视口	h-1/2 (50%), h-[400px] (自定义), min-h-screen
居中	mx-auto	水平居中	mx-auto = margin-left/right: auto
Flex 布局	flex	开启弹性盒子	items-center (垂直居中), justify-between (两端对齐), flex-col (垂直排列), gap-4 (间距)
Grid 布局	grid	开启网格	grid-cols-3 (3列), grid-rows-2 (2行), gap-6 (网格间距)
定位	relative, absolute, fixed	相对/绝对/固定定位	top-0, left-0, right-4, bottom-8
显示	block, inline-block, hidden	显示方式	hidden (隐藏), sm:block (小屏以上显示)

---

二、间距类

功能	类名示例	中文说明	规则
内边距	p-4	四边内边距 1rem (16px)	p-2 (0.5rem), p-8 (2rem), px-4 (左右), py-2 (上下)
外边距	m-4	四边外边距 1rem	mt-8 (上边), mb-2 (下边), ml-4 (左边), mr-6 (右边)
负边距	-mt-2	负上边距	在类名前加 -，如 -mx-4
间距	gap-4	Flex/Grid 子元素间距	gap-2 (0.5rem), gap-6 (1.5rem)

---

三、尺寸类

功能	类名示例	中文说明
最大/最小	max-w-6xl, min-h-screen	最大宽度/最小高度
自定义	w-[400px], h-[100svh]	方括号写任意值
比例	w-1/2, h-1/3	百分比宽度/高度

---

四、字体与文本类

功能	类名示例	中文说明	常用值
字号	text-base	基础字号 (16px)	text-xs (12px), text-sm (14px), text-lg (18px), text-xl (20px), text-2xl-9xl
字重	font-bold	粗体	font-light, font-medium, font-semibold
颜色	text-gray-700	灰色文字	text-white, text-blue-600, text-red-500
对齐	text-center	居中	text-left, text-right, text-justify
行高	leading-relaxed	宽松行高	leading-tight, leading-snug, leading-normal
装饰	underline, line-through	下划线/删除线	no-underline, uppercase (大写)

---

五、背景类

功能	类名示例	中文说明	常用值
颜色	bg-white	白色背景	bg-gray-50-900, bg-red-500, bg-blue-600
透明度	bg-black/50	黑色 50% 透明	/10, /25, /50, /75, /100
渐变	bg-gradient-to-r	从左到右渐变	from-blue-400, to-purple-500
图片	bg-cover, bg-center	背景图覆盖/居中	bg-no-repeat, bg-fixed

---

六、边框类

功能	类名示例	中文说明	常用值
边框	border	1px 边框	border-2, border-t (上边框)
颜色	border-gray-200	灰色边框	border-blue-500, border-transparent (透明)
圆角	rounded-lg	大圆角	rounded (小), rounded-md (中), rounded-xl (特大), rounded-full (圆形)

---

七、效果类

功能	类名示例	中文说明	备注
阴影	shadow-lg	大阴影	shadow (小), shadow-xl (特大), shadow-none
模糊	backdrop-blur	毛玻璃效果	需配合透明度使用
溢出	overflow-hidden	隐藏溢出	overflow-auto, overflow-scroll
透明度	opacity-50	50% 透明	opacity-0 ~ opacity-100
光标	cursor-pointer	手型光标	cursor-default, cursor-not-allowed

---

八、交互与状态类

状态	类名示例	中文说明
悬停	hover:bg-gray-100	鼠标悬停变灰色背景
点击	active:scale-95	点击时缩小
聚焦	focus:ring-2	聚焦时显示蓝色环
禁用	disabled:opacity-50	禁用状态半透明
过渡	transition, duration-200	200ms 平滑过渡

---

九、响应式前缀

前缀	断点	中文说明	典型用法
sm:	≥640px	小屏幕（手机横屏）	sm:grid-cols-2
md:	≥768px	中等屏幕（平板）	md:text-xl
lg:	≥1024px	大屏幕（电脑）	lg:flex-row
xl:	≥1280px	超大屏	xl:max-w-7xl

示例：<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
→ 默认1列，平板3列，电脑4列

---

十、暗色模式前缀

前缀	示例	中文说明
dark:	dark:bg-zinc-900	深色模式下背景变深灰
dark:	dark:text-white	深色模式下文字变白

---

十一、颜色系统速查

Tailwind 提供10级灰度 + 8种常用色，每色有 50~900 的亮度：

颜色	示例	用途
灰度	gray-50 ~ gray-900	文字、背景、边框
主色	blue-500, blue-600	按钮、链接
功能色	red-500 (红), green-500 (绿), yellow-500 (黄)	成功、警告、错误
透明度	bg-blue-500/50	50% 透明蓝色背景

---

实战代码示例

// Next.js + Tailwind CSS 官网首页片段
export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 max-w-md w-full mx-4">
        <h1 className="text-3xl font-bold text-gray-800 mb-4 text-center">
          公司官网
        </h1>
        <p className="text-gray-600 text-center leading-relaxed">
          用 Tailwind CSS 构建，响应式设计，支持暗色模式
        </p>
        <button className="mt-6 w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 active:scale-95 transition-all duration-200 disabled:opacity-50">
          了解更多
        </button>
      </div>
    </main>
  )
}