跳到主要内容

Tailwind CSS 速查表

本章提供 Tailwind CSS 常用工具类的快速参考。

布局​

容器​

类名说明
container响应式容器
mx-auto水平居中

Flexbox​

类名说明
flexdisplay: flex
inline-flexdisplay: inline-flex
flex-row水平排列
flex-col垂直排列
flex-wrap换行
justify-start主轴起点对齐
justify-center主轴居中
justify-end主轴终点对齐
justify-between两端对齐
items-start交叉轴起点对齐
items-center交叉轴居中
items-end交叉轴终点对齐
flex-1flex: 1 1 0%
flex-autoflex: 1 1 auto
flex-noneflex: none
shrink-0不缩小
grow放大填充

Grid​

类名说明
griddisplay: 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}负值

间距比例​

后缀值
00
px1px
0.50.125rem (2px)
10.25rem (4px)
20.5rem (8px)
30.75rem (12px)
41rem (16px)
51.25rem (20px)
61.5rem (24px)
82rem (32px)
102.5rem (40px)
123rem (48px)
164rem (64px)
205rem (80px)
246rem (96px)

尺寸​

宽度​

类名说明
w-0 到 w-96固定宽度
w-1/2 w-1/3 w-2/3 等百分比宽度
w-full100%
w-screen100vw
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-full100%
h-screen100vh
min-h-0 min-h-full min-h-screen最小高度
max-h-full max-h-screen最大高度

排版​

字体大小​

类名大小
text-xs0.75rem (12px)
text-sm0.875rem (14px)
text-base1rem (16px)
text-lg1.125rem (18px)
text-xl1.25rem (20px)
text-2xl1.5rem (24px)
text-3xl1.875rem (30px)
text-4xl2.25rem (36px)
text-5xl3rem (48px)

字体粗细​

类名粗细
font-thin100
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700
font-extrabold800

文字对齐​

类名说明
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-none1
leading-tight1.25
leading-snug1.375
leading-normal1.5
leading-relaxed1.625
leading-loose2

文字装饰​

类名说明
underline下划线
line-through删除线
no-underline无装饰

背景​

背景颜色​

类名说明
bg-transparent透明
bg-black bg-white黑白色
bg-gray-500灰色
bg-blue-500蓝色
bg-red-500红色

背景透明度​

类名说明
bg-blue-500/5050% 透明度
bg-blue-500/7575% 透明度

渐变​

类名说明
bg-linear-to-r从左到右渐变
bg-linear-to-b从上到下渐变
bg-linear-to-br对角线渐变
bg-radial径向渐变
bg-conic锥形渐变
from-{color}渐变起始色
via-{color}渐变中间色
to-{color}渐变结束色

背景图片​

类名说明
bg-cover覆盖容器
bg-contain包含在容器内
bg-center居中
bg-no-repeat不重复
bg-fixed固定背景

边框​

边框宽度​

类名说明
border1px
border-0无边框
border-22px
border-44px
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:键盘焦点
focus-within:子元素获得焦点
active:激活状态
disabled:禁用状态
checked:选中状态
required:必填状态
invalid:验证失败
valid:验证通过
placeholder-shown:显示占位符
read-only:只读状态
dark:暗黑模式
print:打印样式
group-hover:组悬停
peer-checked:兄弟选中

v4.0 新增状态变体​

前缀说明
starting:元素首次出现时
not-*否定其他变体
in-hover:祖先悬停（无需 group）
in-focus:祖先聚焦
nth-odd:奇数位置子元素
nth-even:偶数位置子元素
nth-1: 到 nth-12:第 n 个子元素
inert:inert 属性元素
open:打开状态（details/dialog/popover）
autofill:浏览器自动填充
data-*:数据属性变体
aria-*:ARIA 状态变体

光标​

类名说明
cursor-auto自动
cursor-default默认
cursor-pointer手型
cursor-not-allowed禁止

过渡​

类名说明
transition过渡所有属性
transition-colors过渡颜色
transition-opacity过渡透明度
transition-transform过渡变换
duration-150150ms
duration-300300ms
ease-in加速
ease-out减速
ease-in-out加速减速

变换​

类名说明
scale-50 scale-75 scale-90缩小
scale-100原始大小
scale-105 scale-110 scale-125放大
rotate-0不旋转
rotate-45旋转 45 度
rotate-90旋转 90 度
rotate-180旋转 180 度
translate-x-4水平移动
translate-y-4垂直移动
-translate-x-4反向移动
skew-x-12水平倾斜
skew-y-12垂直倾斜
origin-center变换原点：中心
origin-top-left变换原点：左上角

响应式​

断点前缀​

前缀最小宽度
sm:640px
md:768px
lg:1024px
xl:1280px
2xl:1536px

容器查询（v4+）​

前缀最小宽度
@3xs:256px
@xs:320px
@sm:384px
@md:448px
@lg:512px
@xl:576px
@2xl:672px
@3xl:768px
<!-- 定义容器 -->
<div class="@container">
  <!-- 根据容器大小应用样式 -->
  <div class="flex flex-col @md:flex-row">
    响应式布局
  </div>
</div>

使用示例​

<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-2525% 不透明
opacity-5050% 不透明
opacity-7575% 不透明
opacity-100完全不透明

文字阴影（v4.1+）​

类名说明
text-shadow-2xs超小阴影
text-shadow-xs小阴影
text-shadow-sm默认阴影
text-shadow-md中等阴影
text-shadow-lg大阴影
text-shadow-none无阴影
text-shadow-{color}阴影颜色
text-shadow-{size}/{opacity}阴影透明度

滤镜​

类名说明
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>