Tailwind CSS 速查表
本章提供 Tailwind CSS 常用工具类的快速参考。
布局
容器
| 类名 | 说明 |
|---|---|
container | 响应式容器 |
mx-auto | 水平居中 |
Flexbox
| 类名 | 说明 |
|---|---|
flex | display: flex |
inline-flex | display: inline-flex |
flex-row | 水平排列 |
flex-col | 垂直排列 |
flex-wrap | 换行 |
justify-start | 主轴起点对齐 |
justify-center | 主轴居中 |
justify-end | 主轴终点对齐 |
justify-between | 两端对齐 |
items-start | 交叉轴起点对齐 |
items-center | 交叉轴居中 |
items-end | 交叉轴终点对齐 |
flex-1 | flex: 1 1 0% |
flex-auto | flex: 1 1 auto |
flex-none | flex: none |
shrink-0 | 不缩小 |
grow | 放大填充 |
Grid
| 类名 | 说明 |
|---|---|
grid | display: grid |
grid-cols-1 到 grid-cols-12 | 列数 |
grid-rows-1 到 grid-rows-6 | 行数 |
col-span-1 到 col-span-12 | 跨列 |
row-span-1 到 row-span-6 | 跨行 |
gap-1 到 gap-12 | 间隙 |
定位
| 类名 | 说明 |
|---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
top-0 right-0 bottom-0 left-0 | 偏移 |
inset-0 | 四边为 0 |
z-0 到 z-50 | 层级 |
显示
| 类名 | 说明 |
|---|---|
block | 块级 |
inline-block | 行内块 |
inline | 行内 |
hidden | 隐藏 |
overflow-auto | 自动滚动 |
overflow-hidden | 隐藏溢出 |
间距
内边距
| 类名 | 说明 |
|---|---|
p-{n} | 四边 |
px-{n} | 左右 |
py-{n} | 上下 |
pt-{n} pr-{n} pb-{n} pl-{n} | 单边 |
外边距
| 类名 | 说明 |
|---|---|
m-{n} | 四边 |
mx-{n} | 左右 |
my-{n} | 上下 |
mx-auto | 水平居中 |
mt-{n} mr-{n} mb-{n} ml-{n} | 单边 |
-m-{n} | 负值 |
间距比例
| 后缀 | 值 |
|---|---|
| 0 | 0 |
| px | 1px |
| 0.5 | 0.125rem (2px) |
| 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) |
| 3 | 0.75rem (12px) |
| 4 | 1rem (16px) |
| 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) |
| 8 | 2rem (32px) |
| 10 | 2.5rem (40px) |
| 12 | 3rem (48px) |
| 16 | 4rem (64px) |
| 20 | 5rem (80px) |
| 24 | 6rem (96px) |
尺寸
宽度
| 类名 | 说明 |
|---|---|
w-0 到 w-96 | 固定宽度 |
w-1/2 w-1/3 w-2/3 等 | 百分比宽度 |
w-full | 100% |
w-screen | 100vw |
w-auto | 自动 |
min-w-0 min-w-full | 最小宽度 |
max-w-xs 到 max-w-7xl | 最大宽度 |
max-w-full | 最大宽度 100% |
高度
| 类名 | 说明 |
|---|---|
h-0 到 h-96 | 固定高度 |
h-1/2 等 | 百分比高度 |
h-full | 100% |
h-screen | 100vh |
min-h-0 min-h-full min-h-screen | 最小高度 |
max-h-full max-h-screen | 最大高度 |
排版
字体大小
| 类名 | 大小 |
|---|---|
text-xs | 0.75rem (12px) |
text-sm | 0.875rem (14px) |
text-base | 1rem (16px) |
text-lg | 1.125rem (18px) |
text-xl | 1.25rem (20px) |
text-2xl | 1.5rem (24px) |
text-3xl | 1.875rem (30px) |
text-4xl | 2.25rem (36px) |
text-5xl | 3rem (48px) |
字体粗细
| 类名 | 粗细 |
|---|---|
font-thin | 100 |
font-light | 300 |
font-normal | 400 |
font-medium | 500 |
font-semibold | 600 |
font-bold | 700 |
font-extrabold | 800 |
文字对齐
| 类名 | 说明 |
|---|---|
text-left | 左对齐 |
text-center | 居中 |
text-right | 右对齐 |
text-justify | 两端对齐 |
文字颜色
| 类名 | 说明 |
|---|---|
text-black text-white | 黑白色 |
text-gray-500 | 灰色 |
text-red-500 | 红色 |
text-blue-500 | 蓝色 |
text-green-500 | 绿色 |
行高
| 类名 | 行高 |
|---|---|
leading-none | 1 |
leading-tight | 1.25 |
leading-snug | 1.375 |
leading-normal | 1.5 |
leading-relaxed | 1.625 |
leading-loose | 2 |
文字装饰
| 类名 | 说明 |
|---|---|
underline | 下划线 |
line-through | 删除线 |
no-underline | 无装饰 |
背景
背景颜色
| 类名 | 说明 |
|---|---|
bg-transparent | 透明 |
bg-black bg-white | 黑白色 |
bg-gray-500 | 灰色 |
bg-blue-500 | 蓝色 |
bg-red-500 | 红色 |
背景透明度
| 类名 | 说明 |
|---|---|
bg-blue-500/50 | 50% 透明度 |
bg-blue-500/75 | 75% 透明度 |
边框
边框宽度
| 类名 | 说明 |
|---|---|
border | 1px |
border-0 | 无边框 |
border-2 | 2px |
border-4 | 4px |
border-t border-r border-b border-l | 单边 |
边框颜色
| 类名 | 说明 |
|---|---|
border-gray-300 | 灰色边框 |
border-blue-500 | 蓝色边框 |
border-transparent | 透明边框 |
圆角
| 类名 | 说明 |
|---|---|
rounded-none | 无圆角 |
rounded-sm | 小圆角 |
rounded | 默认圆角 |
rounded-md | 中等圆角 |
rounded-lg | 大圆角 |
rounded-xl | 超大圆角 |
rounded-2xl | 更大圆角 |
rounded-full | 完全圆形 |
阴影
| 类名 | 说明 |
|---|---|
shadow-sm | 小阴影 |
shadow | 默认阴影 |
shadow-md | 中等阴影 |
shadow-lg | 大阴影 |
shadow-xl | 超大阴影 |
shadow-2xl | 最大阴影 |
shadow-none | 无阴影 |
交互
状态前缀
| 前缀 | 说明 |
|---|---|
hover: | 悬停状态 |
focus: | 焦点状态 |
focus-visible: | 键盘焦点 |
active: | 激活状态 |
disabled: | 禁用状态 |
checked: | 选中状态 |
dark: | 暗黑模式 |
group-hover: | 组悬停 |
peer-checked: | 兄弟选中 |
光标
| 类名 | 说明 |
|---|---|
cursor-auto | 自动 |
cursor-default | 默认 |
cursor-pointer | 手型 |
cursor-not-allowed | 禁止 |
过渡
| 类名 | 说明 |
|---|---|
transition | 过渡所有属性 |
transition-colors | 过渡颜色 |
transition-opacity | 过渡透明度 |
transition-transform | 过渡变换 |
duration-150 | 150ms |
duration-300 | 300ms |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 加速减速 |
变换
| 类名 | 说明 |
|---|---|
scale-95 | 缩小到 95% |
scale-100 | 原始大小 |
scale-105 | 放大到 105% |
rotate-0 | 不旋转 |
rotate-45 | 旋转 45 度 |
rotate-90 | 旋转 90 度 |
响应式
断点前缀
| 前缀 | 最小宽度 |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
2xl: | 1536px |
使用示例
<div class="w-full md:w-1/2 lg:w-1/3">
响应式宽度
</div>
<div class="hidden md:block">
中等屏幕以上显示
</div>
<div class="flex flex-col md:flex-row">
响应式布局
</div>
动画
| 类名 | 说明 |
|---|---|
animate-none | 无动画 |
animate-spin | 旋转 |
animate-ping | 脉冲 |
animate-pulse | 闪烁 |
animate-bounce | 弹跳 |
效果
透明度
| 类名 | 说明 |
|---|---|
opacity-0 | 完全透明 |
opacity-25 | 25% 不透明 |
opacity-50 | 50% 不透明 |
opacity-75 | 75% 不透明 |
opacity-100 | 完全不透明 |
滤镜
| 类名 | 说明 |
|---|---|
blur-none | 无模糊 |
blur-sm | 小模糊 |
blur | 默认模糊 |
blur-md | 中等模糊 |
blur-lg | 大模糊 |
grayscale | 灰度 |
invert | 反色 |
常用组合
按钮
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
按钮
</button>
卡片
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<img class="w-full" src="image.jpg" alt="">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">标题</div>
<p class="text-gray-700 text-base">描述</p>
</div>
</div>
输入框
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="输入内容">
居中容器
<div class="flex items-center justify-center h-screen">
<div>居中内容</div>
</div>
固定页脚
<div class="min-h-screen flex flex-col">
<main class="flex-grow">
主要内容
</main>
<footer class="bg-gray-800 text-white p-4">
页脚
</footer>
</div>