Tailwind CSS 完整类名对照表（中文版）
> 本文基于 Tailwind CSS 官方文档及实战总结，适合前端开发者快速查阅。
📖 目录
- 布局与容器类
- 间距类
- 尺寸类
- 字体与文本类
- 背景类
- 边框类
- 效果类
- 交互与状态类
- 响应式前缀
- 暗色模式前缀
- 颜色系统速查
- 实战代码示例
- 学习建议
一、布局与容器类
| 功能 | 类名示例 | 中文说明 | 常用值 |
|---|---|---|---|
| 宽度 | 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> ) }
