Tailwind CSS 快速参考手册（更新版）
📦 布局 (Layout)
容器与显示
| 分类 |
写法 |
说明 |
等价 CSS |
| 容器 |
container |
居中容器，有响应式断点 |
max-width |
| 显示 |
block inline inline-block flex grid hidden |
显示类型 |
display |
| 定位 |
static fixed absolute relative sticky |
定位方式 |
position |
Flexbox
| 方向 |
写法 |
说明 |
| 主轴方向 |
flex-row flex-row-reverse flex-col flex-col-reverse |
排列方向 |
| 换行 |
flex-wrap flex-wrap-reverse flex-nowrap |
是否换行 |
| 对齐 |
justify-start justify-center justify-end justify-between justify-around |
主轴对齐 |
| 对齐 |
items-start items-center items-end items-stretch items-baseline |
交叉轴对齐 |
| 间隔 |
gap-4 gap-x-2 gap-y-3 |
间距 |
Grid
| 分类 |
写法 |
说明 |
| 列 |
grid-cols-1 grid-cols-2 grid-cols-3 |
列数 |
| 行 |
grid-rows-1 grid-rows-2 |
行数 |
| 跨度 |
col-span-1 col-span-2 row-span-2 |
跨越单元格 |
| 位置 |
col-start-1 col-end-3 row-start-2 |
起始/结束位置 |
🎨 样式 (Styling)
尺寸 (Sizing)
| 分类 |
写法 |
像素值 |
说明 |
| 宽度 |
w-4 w-8 w-16 w-24 w-32 w-48 w-64 |
16px 32px 64px 96px 128px 192px 256px |
固定宽度 |
|
w-1/2 w-1/3 w-2/3 w-1/4 |
50% 33.33% 66.67% 25% |
比例宽度 |
|
w-full w-screen w-auto w-min w-max |
100% 100vw auto min-content max-content |
特殊宽度 |
| 高度 |
h-4 h-8 h-16 h-24 h-32 h-48 h-64 |
同宽度 |
固定高度 |
|
h-1/2 h-1/3 h-2/3 h-1/4 |
同宽度 |
比例高度 |
|
h-full h-screen h-auto |
100% 100vh auto |
特殊高度 |
间距 (Spacing)
| 分类 |
写法 |
像素值 |
说明 |
| 内边距 |
p-4 |
16px |
所有方向 |
|
px-4 py-4 |
水平/垂直 |
x=水平，y=垂直 |
|
pt-4 pr-4 pb-4 pl-4 |
上/右/下/左 |
单独方向 |
| 外边距 |
m-4 mx-4 my-4 |
同内边距 |
外边距 |
|
mt-4 mr-4 mb-4 ml-4 |
同内边距 |
单独方向 |
|
-m-4 |
负外边距 |
负值 |
颜色 (Colors)
// 文字颜色
text-gray-50 text-gray-100 text-gray-200 ... text-gray-900
text-red-500 text-blue-500 text-green-500
text-white text-black text-transparent// 背景色
bg-gray-50 bg-red-500 bg-blue-500
bg-white bg-black bg-transparent// 边框色
border-gray-300 border-red-500
边框 (Borders)
| 分类 |
写法 |
说明 |
| 边框 |
border border-2 border-4 |
边框宽度 |
| 圆角 |
rounded rounded-lg rounded-xl rounded-2xl rounded-full |
圆角大小 |
| 样式 |
border-solid border-dashed border-dotted |
边框样式 |
📱 响应式设计
断点前缀
| 前缀 |
屏幕宽度 |
使用示例 |
| 默认 |
< 640px |
text-sm |
sm: |
≥ 640px |
sm:text-base |
md: |
≥ 768px |
md:text-lg |
lg: |
≥ 1024px |
lg:text-xl |
xl: |
≥ 1280px |
xl:text-2xl |
2xl: |
≥ 1536px |
2xl:text-3xl |
示例
// 移动端小字，桌面端大字
className="text-sm md:text-base lg:text-lg xl:text-xl"// 移动端垂直布局，桌面端水平布局
className="flex-col md:flex-row"// 移动端隐藏，桌面端显示
className="hidden md:block"
✨ 特效 (Effects)
阴影
| 写法 |
效果 |
shadow |
小阴影 |
shadow-md |
中等阴影 |
shadow-lg |
大阴影 |
shadow-xl |
超大阴影 |
shadow-2xl |
巨大阴影 |
shadow-inner |
内阴影 |
透明度
| 写法 |
说明 |
opacity-0 |
完全透明 |
opacity-25 |
25%透明度 |
opacity-50 |
半透明 |
opacity-75 |
75%透明度 |
opacity-100 |
完全不透明 |
变换
| 分类 |
写法 |
说明 |
| 旋转 |
rotate-0 rotate-45 rotate-90 |
旋转角度 |
| 缩放 |
scale-0 scale-50 scale-75 scale-100 scale-125 |
缩放比例 |
| 位移 |
translate-x-4 -translate-x-4 translate-y-4 |
移动位置 |
🎭 交互 (Interactivity)
悬停状态
// 基础写法
className="hover:bg-blue-500 hover:text-white"// 常用组合
className="bg-gray-200 hover:bg-blue-500 hover:text-whitetransition-colors duration-200
"// 禁用状态
className="disabled:opacity-50 disabled:cursor-not-allowed"
聚焦状态
className="focus:outline-none focus:ring-2 focus:ring-blue-500focus:border-transparent
"
活动状态
className="active:scale-95 active:bg-blue-600transition-transform
"
📄 排版 (Typography)
字体大小
| 写法 |
像素值 |
说明 |
text-xs |
12px |
超小 |
text-sm |
14px |
小 |
text-base |
16px |
基础（默认） |
text-lg |
18px |
大 |
text-xl |
20px |
超大 |
text-2xl |
24px |
2倍大 |
text-3xl |
30px |
3倍大 |
| ... |
... |
... |
text-9xl |
96px |
9倍大 |
字体粗细
| 写法 |
说明 |
font-thin |
100 (最细) |
font-extralight |
200 |
font-light |
300 |
font-normal |
400 (正常) |
font-medium |
500 (中等) |
font-semibold |
600 (半粗) |
font-bold |
700 (粗体) |
font-extrabold |
800 (特粗) |
font-black |
900 (最粗) |
文本对齐
| 写法 |
说明 |
text-left |
左对齐 |
text-center |
居中对齐 |
text-right |
右对齐 |
text-justify |
两端对齐 |
🖼️ 图片处理 (重点更新)
object-fit 属性对比
| 属性 |
写法 |
效果 |
适合场景 |
| object-contain ✅ |
object-contain |
完整显示图片，保持比例，可能有留白 |
产品图、Logo展示 |
| object-cover |
object-cover |
填满容器，裁剪多余部分 |
背景图、头像裁剪 |
| object-fill |
object-fill |
拉伸填满，不保持比例 |
需要变形效果 |
| object-none |
object-none |
原始尺寸，不缩放 |
像素图、图标 |
| object-scale-down |
object-scale-down |
类似 contain，但不会放大 |
小图显示 |
图片相关工具类
| 分类 |
写法 |
说明 |
| 圆角 |
rounded rounded-lg rounded-full |
图片圆角 |
| 边框 |
border border-2 border-gray-300 |
图片边框 |
| 阴影 |
shadow shadow-lg shadow-xl |
图片阴影 |
| 滤镜 |
grayscale sepia blur brightness-50 |
图片滤镜 |
| 混合 |
mix-blend-multiply mix-blend-overlay |
混合模式 |
图片布局示例
// 1. 保持比例完整显示（推荐产品图）
className="w-full h-auto object-contain"// 2. 裁剪填充（背景图）
className="w-full h-full object-cover"// 3. 居中显示
className="w-auto h-auto max-w-full max-h-full object-contain"// 4. 响应式图片
className="w-full h-auto sm:w-3/4 md:w-2/3 lg:w-1/2 object-contain"
🔧 实用工具
溢出
| 写法 |
说明 |
overflow-auto |
自动显示滚动条 |
overflow-hidden |
隐藏溢出内容 |
overflow-scroll |
强制显示滚动条 |
overflow-x-auto |
水平方向溢出处理 |
overflow-y-auto |
垂直方向溢出处理 |
光标
| 写法 |
说明 |
cursor-pointer |
手型指针 |
cursor-default |
默认指针 |
cursor-not-allowed |
禁止指针 |
cursor-wait |
等待指针 |
cursor-move |
移动指针 |
用户选择
| 写法 |
说明 |
select-none |
不可选择 |
select-text |
可选择文本 |
select-all |
可选择所有 |
select-auto |
浏览器默认 |
🎯 组合示例
按钮组件
className="px-4 py-2 // 内边距bg-blue-500 // 背景色text-white // 文字色rounded-lg // 圆角hover:bg-blue-600 // 悬停背景focus:outline-none // 聚焦样式focus:ring-2 // 聚焦光晕focus:ring-blue-300 // 聚焦颜色active:scale-95 // 点击缩放transition-all // 过渡动画duration-200 // 动画时长disabled:opacity-50 // 禁用透明度disabled:cursor-not-allowed // 禁用指针
"
卡片组件
className="p-6 // 内边距bg-white // 背景rounded-xl // 圆角shadow-lg // 阴影border // 边框border-gray-200 // 边框色hover:shadow-xl // 悬停阴影hover:border-gray-300 // 悬停边框transition-all // 过渡duration-300 // 时长
"
输入框组件
className="w-full // 宽度px-3 py-2 // 内边距border // 边框border-gray-300 // 边框色rounded-md // 圆角focus:outline-none // 聚焦样式focus:ring-2 // 聚焦光晕focus:ring-blue-500 // 聚焦颜色focus:border-transparent // 聚焦边框placeholder-gray-400 // 占位符颜色disabled:bg-gray-100 // 禁用背景disabled:cursor-not-allowed // 禁用指针
"
产品图片组件（重点）
// 保持比例完整显示
className="w-full h-auto // 自适应宽度object-contain // ✅ 保持比例max-w-full max-h-full // 限制最大尺寸rounded-xl // 圆角shadow-lg // 阴影bg-gray-50 // 背景色（防透明）
"// 或者使用容器控制
<div className="w-2/3 h-[60vh] flex items-center justify-center"><imgclassName="w-auto h-auto max-w-full max-h-full object-contain"src={imageSrc}alt="产品图"/>
</div>
🚀 快捷技巧
1. 常用数值规律
// 间距：0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
// 乘以 4 就是像素值：p-4 = 16px, m-8 = 32px
2. 断点记忆口诀
// 小(sm) 中(md) 大(lg) 超大(xl) 2倍超大(2xl)
// 640 768 1024 1280 1536
3. 颜色深浅规律
// 50(最浅), 100, 200, 300, 400, 500(中等), 600, 700, 800, 900(最深)
// 常用：50(背景), 100(浅背景), 500(主色), 600(悬停), 700(深色)
4. 实用组合
// 垂直居中
className="flex items-center justify-center"// 水平居中
className="flex justify-center"// 两端对齐
className="flex justify-between"// 绝对居中
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"// 固定底部
className="fixed bottom-0 left-0 right-0"// 全屏背景
className="fixed inset-0 bg-black/50"
📱 响应式布局示例
// 响应式网格布局
className="gridgrid-cols-1 // 移动端：1列sm:grid-cols-2 // 小屏：2列md:grid-cols-3 // 中屏：3列lg:grid-cols-4 // 大屏：4列gap-4 // 间距p-4 // 内边距
"// 响应式文本
className="text-sm // 移动端：小字sm:text-base // 小屏：正常md:text-lg // 中屏：大字lg:text-xl // 大屏：更大
"// 响应式显示/隐藏
className="hidden // 移动端隐藏md:block // 中屏显示lg:flex // 大屏flex显示
"
🔄 object-fit 详细对比
| 场景 |
推荐写法 |
效果图示 |
| 产品展示图 |
object-contain |
保持比例，完整显示，可能有留白 |
| 用户头像 |
object-cover |
填满方形，裁剪边缘 |
| 背景图片 |
object-cover |
填满容器，裁剪多余 |
| Logo图标 |
object-contain |
完整显示，保持清晰 |
| 横幅广告 |
object-cover |
填满横幅，裁剪上下 |
// 产品图正确示例
<div className="w-2/3 h-80"><imgclassName="w-full h-full object-contain" // ✅ 正确src="/product.jpg"alt="产品"/>
</div>// 背景图正确示例
<div className="w-full h-96"><imgclassName="w-full h-full object-cover" // ✅ 正确src="/banner.jpg"alt="横幅"/>
</div>
💡 常见问题解决
1. 图片变形问题
// ❌ 错误：会拉伸图片
className="w-full h-full"// ✅ 正确：保持比例
className="w-full h-full object-contain"
2. 图片被裁剪问题
// ❌ 错误：object-cover 会裁剪
className="w-full h-full object-cover"// ✅ 正确：object-contain 保持完整
className="w-full h-full object-contain"
3. 图片超出容器
// 添加限制
className="max-w-full max-h-full object-contain"
总结：这次更新特别强调了 object-contain 和 object-cover 的区别，这是你刚才遇到的问题。记住：
object-contain：保持比例，完整显示（适合产品图）object-cover：填满容器，可能裁剪（适合背景图）
把这个文档保存为你的 Tailwind CSS 速查手册，开发时随时查阅！