Tailwind CSS 速查表
常用 Tailwind CSS 工具类速查参考，支持搜索过滤、点击复制，包含类名到 CSS 的映射说明
Layout28 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
block | display: block; | 块级元素 | |
inline-block | display: inline-block; | 行内块元素 | |
inline | display: inline; | 行内元素 | |
flex | display: flex; | 弹性盒容器 | |
inline-flex | display: inline-flex; | 行内弹性盒 | |
grid | display: grid; | 网格容器 | |
inline-grid | display: inline-grid; | 行内网格 | |
hidden | display: none; | 隐藏元素 | |
container | max-width: 100%; @media(min-width) { max-width: ... } | 响应式容器 | |
float-left | float: left; | 左浮动 | |
float-right | float: right; | 右浮动 | |
clearfix | clear: both; | 清除浮动 | |
overflow-auto | overflow: auto; | 自动溢出滚动 | |
overflow-hidden | overflow: hidden; | 隐藏溢出内容 | |
overflow-scroll | overflow: scroll; | 始终显示滚动条 | |
overflow-visible | overflow: visible; | 溢出内容可见 | |
relative | position: relative; | 相对定位 | |
absolute | position: absolute; | 绝对定位 | |
fixed | position: fixed; | 固定定位 | |
sticky | position: sticky; | 粘性定位 | |
static | position: static; | 静态定位（默认） | |
inset-0 | top: 0; right: 0; bottom: 0; left: 0; | 四边距离为0 | |
top-0 | top: 0px; | 顶部距离0 | |
right-0 | right: 0px; | 右侧距离0 | |
bottom-0 | bottom: 0px; | 底部距离0 | |
left-0 | left: 0px; | 左侧距离0 | |
z-10 | z-index: 10; | 层级10 | |
z-50 | z-index: 50; | 层级50 |
Flexbox29 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
flex-row | flex-direction: row; | 水平排列（默认） | |
flex-row-reverse | flex-direction: row-reverse; | 水平反向排列 | |
flex-col | flex-direction: column; | 垂直排列 | |
flex-col-reverse | flex-direction: column-reverse; | 垂直反向排列 | |
flex-wrap | flex-wrap: wrap; | 允许换行 | |
flex-nowrap | flex-wrap: nowrap; | 不换行 | |
flex-1 | flex: 1 1 0%; | 等分剩余空间 | |
flex-auto | flex: 1 1 auto; | 根据内容弹性伸缩 | |
flex-none | flex: none; | 不伸缩 | |
flex-grow | flex-grow: 1; | 允许放大 | |
flex-shrink | flex-shrink: 1; | 允许缩小 | |
flex-shrink-0 | flex-shrink: 0; | 禁止缩小 | |
justify-start | justify-content: flex-start; | 主轴起点对齐 | |
justify-center | justify-content: center; | 主轴居中 | |
justify-end | justify-content: flex-end; | 主轴末端对齐 | |
justify-between | justify-content: space-between; | 两端对齐 | |
justify-around | justify-content: space-around; | 等间距环绕 | |
justify-evenly | justify-content: space-evenly; | 等间距均分 | |
items-start | align-items: flex-start; | 交叉轴起点对齐 | |
items-center | align-items: center; | 交叉轴居中 | |
items-end | align-items: flex-end; | 交叉轴末端对齐 | |
items-stretch | align-items: stretch; | 交叉轴拉伸 | |
items-baseline | align-items: baseline; | 基线对齐 | |
self-start | align-self: flex-start; | 自身起点对齐 | |
self-center | align-self: center; | 自身居中 | |
self-end | align-self: flex-end; | 自身末端对齐 | |
gap-4 | gap: 1rem; | 间距1rem | |
gap-x-4 | column-gap: 1rem; | 列间距1rem | |
gap-y-4 | row-gap: 1rem; | 行间距1rem |
Grid14 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | 1列网格 | |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | 2列网格 | |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | 3列网格 | |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | 4列网格 | |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | 6列网格 | |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | 12列网格 | |
grid-cols-none | grid-template-columns: none; | 无显式列定义 | |
col-span-2 | grid-column: span 2 / span 2; | 占2列 | |
col-span-full | grid-column: 1 / -1; | 占满整行 | |
col-start-1 | grid-column-start: 1; | 从第1列开始 | |
row-span-2 | grid-row: span 2 / span 2; | 占2行 | |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); | 2行网格 | |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); | 自动列填满 | |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); | 自动行填满 |
Spacing26 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
m-0 | margin: 0px; | 外边距0 | |
m-1 | margin: 0.25rem; | 外边距0.25rem | |
m-2 | margin: 0.5rem; | 外边距0.5rem | |
m-4 | margin: 1rem; | 外边距1rem | |
m-auto | margin: auto; | 自动外边距（居中） | |
mx-auto | margin-left: auto; margin-right: auto; | 水平居中 | |
mx-4 | margin-left: 1rem; margin-right: 1rem; | 左右外边距1rem | |
my-4 | margin-top: 1rem; margin-bottom: 1rem; | 上下外边距1rem | |
mt-4 | margin-top: 1rem; | 顶部外边距1rem | |
mr-4 | margin-right: 1rem; | 右侧外边距1rem | |
mb-4 | margin-bottom: 1rem; | 底部外边距1rem | |
ml-4 | margin-left: 1rem; | 左侧外边距1rem | |
-m-4 | margin: -1rem; | 负外边距-1rem | |
p-0 | padding: 0px; | 内边距0 | |
p-1 | padding: 0.25rem; | 内边距0.25rem | |
p-2 | padding: 0.5rem; | 内边距0.5rem | |
p-4 | padding: 1rem; | 内边距1rem | |
px-4 | padding-left: 1rem; padding-right: 1rem; | 左右内边距1rem | |
py-4 | padding-top: 1rem; padding-bottom: 1rem; | 上下内边距1rem | |
pt-4 | padding-top: 1rem; | 顶部内边距1rem | |
pr-4 | padding-right: 1rem; | 右侧内边距1rem | |
pb-4 | padding-bottom: 1rem; | 底部内边距1rem | |
pl-4 | padding-left: 1rem; | 左侧内边距1rem | |
space-x-4 | > * + * { margin-left: 1rem; } | 子元素水平间距1rem | |
space-y-4 | > * + * { margin-top: 1rem; } | 子元素垂直间距1rem | |
space-x-reverse | 方向反转 | 水平间距方向反转 |
Sizing33 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
w-0 | width: 0px; | 宽度0 | |
w-1 | width: 0.25rem; | 宽度0.25rem | |
w-4 | width: 1rem; | 宽度1rem | |
w-1/2 | width: 50%; | 宽度50% | |
w-1/3 | width: 33.333%; | 宽度33.3% | |
w-2/3 | width: 66.667%; | 宽度66.7% | |
w-full | width: 100%; | 宽度100% | |
w-screen | width: 100vw; | 视口宽度 | |
w-min | width: min-content; | 最小内容宽度 | |
w-max | width: max-content; | 最大内容宽度 | |
w-fit | width: fit-content; | 适配内容宽度 | |
w-auto | width: auto; | 自动宽度 | |
min-w-0 | min-width: 0px; | 最小宽度0 | |
min-w-full | min-width: 100%; | 最小宽度100% | |
max-w-xs | max-width: 20rem; | 最大宽度20rem | |
max-w-sm | max-width: 24rem; | 最大宽度24rem | |
max-w-md | max-width: 28rem; | 最大宽度28rem | |
max-w-lg | max-width: 32rem; | 最大宽度32rem | |
max-w-xl | max-width: 36rem; | 最大宽度36rem | |
max-w-2xl | max-width: 42rem; | 最大宽度42rem | |
max-w-full | max-width: 100%; | 最大宽度100% | |
max-w-none | max-width: none; | 无最大宽度限制 | |
max-w-prose | max-width: 65ch; | 最大宽度65字符 | |
h-0 | height: 0px; | 高度0 | |
h-4 | height: 1rem; | 高度1rem | |
h-full | height: 100%; | 高度100% | |
h-screen | height: 100vh; | 视口高度 | |
h-auto | height: auto; | 自动高度 | |
min-h-0 | min-height: 0px; | 最小高度0 | |
min-h-full | min-height: 100%; | 最小高度100% | |
min-h-screen | min-height: 100vh; | 最小高度视口 | |
max-h-full | max-height: 100%; | 最大高度100% | |
max-h-screen | max-height: 100vh; | 最大高度视口 |
Typography57 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
text-xs | font-size: 0.75rem; line-height: 1rem; | 超小号文字12px | |
text-sm | font-size: 0.875rem; line-height: 1.25rem; | 小号文字14px | |
text-base | font-size: 1rem; line-height: 1.5rem; | 基础文字16px | |
text-lg | font-size: 1.125rem; line-height: 1.75rem; | 大号文字18px | |
text-xl | font-size: 1.25rem; line-height: 1.75rem; | 特大文字20px | |
text-2xl | font-size: 1.5rem; line-height: 2rem; | 2倍大文字24px | |
text-3xl | font-size: 1.875rem; line-height: 2.25rem; | 3倍大文字30px | |
text-4xl | font-size: 2.25rem; line-height: 2.5rem; | 4倍大文字36px | |
text-5xl | font-size: 3rem; line-height: 1; | 5倍大文字48px | |
font-thin | font-weight: 100; | 极细字体 | |
font-light | font-weight: 300; | 细体 | |
font-normal | font-weight: 400; | 正常字体 | |
font-medium | font-weight: 500; | 中等字体 | |
font-semibold | font-weight: 600; | 半粗体 | |
font-bold | font-weight: 700; | 粗体 | |
font-extrabold | font-weight: 800; | 超粗体 | |
font-black | font-weight: 900; | 黑体 | |
text-left | text-align: left; | 左对齐 | |
text-center | text-align: center; | 居中对齐 | |
text-right | text-align: right; | 右对齐 | |
text-justify | text-align: justify; | 两端对齐 | |
leading-none | line-height: 1; | 行高1 | |
leading-tight | line-height: 1.25; | 紧凑行高 | |
leading-normal | line-height: 1.5; | 正常行高 | |
leading-relaxed | line-height: 1.625; | 宽松行高 | |
leading-loose | line-height: 2; | 松散行高 | |
tracking-tight | letter-spacing: -0.025em; | 紧凑字间距 | |
tracking-normal | letter-spacing: 0em; | 正常字间距 | |
tracking-wide | letter-spacing: 0.025em; | 宽字间距 | |
tracking-wider | letter-spacing: 0.05em; | 更宽字间距 | |
tracking-widest | letter-spacing: 0.1em; | 最宽字间距 | |
uppercase | text-transform: uppercase; | 大写转换 | |
lowercase | text-transform: lowercase; | 小写转换 | |
capitalize | text-transform: capitalize; | 首字母大写 | |
normal-case | text-transform: none; | 不做转换 | |
underline | text-decoration-line: underline; | 下划线 | |
overline | text-decoration-line: overline; | 上划线 | |
line-through | text-decoration-line: line-through; | 删除线 | |
no-underline | text-decoration-line: none; | 无装饰线 | |
truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | 单行截断省略 | |
text-ellipsis | text-overflow: ellipsis; | 文本省略号 | |
text-clip | text-overflow: clip; | 文本裁剪 | |
break-normal | overflow-wrap: normal; word-break: normal; | 正常换行 | |
break-words | overflow-wrap: break-word; | 单词内换行 | |
break-all | word-break: break-all; | 任意位置换行 | |
whitespace-normal | white-space: normal; | 正常空白处理 | |
whitespace-nowrap | white-space: nowrap; | 不换行 | |
whitespace-pre | white-space: pre; | 保留空白 | |
whitespace-pre-wrap | white-space: pre-wrap; | 保留空白并换行 | |
italic | font-style: italic; | 斜体 | |
not-italic | font-style: normal; | 非斜体 | |
list-none | list-style-type: none; | 无列表标记 | |
list-disc | list-style-type: disc; | 实心圆点列表 | |
list-decimal | list-style-type: decimal; | 数字列表 | |
list-inside | list-style-position: inside; | 标记在内容内 | |
list-outside | list-style-position: outside; | 标记在内容外 | |
placeholder-gray-400 | ::placeholder { color: #9ca3af; } | 占位符颜色 |
Backgrounds32 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
bg-transparent | background-color: transparent; | 透明背景 | |
bg-black | background-color: #000; | 黑色背景 | |
bg-white | background-color: #fff; | 白色背景 | |
bg-gray-100 | background-color: #f3f4f6; | 浅灰背景 | |
bg-gray-200 | background-color: #e5e7eb; | 灰色背景 | |
bg-gray-500 | background-color: #6b7280; | 中灰背景 | |
bg-gray-800 | background-color: #1f2937; | 深灰背景 | |
bg-gray-900 | background-color: #111827; | 极深灰背景 | |
bg-red-500 | background-color: #ef4444; | 红色背景 | |
bg-blue-500 | background-color: #3b82f6; | 蓝色背景 | |
bg-green-500 | background-color: #22c55e; | 绿色背景 | |
bg-yellow-500 | background-color: #eab308; | 黄色背景 | |
bg-purple-500 | background-color: #a855f7; | 紫色背景 | |
bg-indigo-500 | background-color: #6366f1; | 靛蓝背景 | |
bg-pink-500 | background-color: #ec4899; | 粉色背景 | |
bg-opacity-50 | --tw-bg-opacity: 0.5; | 背景透明度50% | |
bg-cover | background-size: cover; | 背景图覆盖 | |
bg-contain | background-size: contain; | 背景图包含 | |
bg-center | background-position: center; | 背景图居中 | |
bg-top | background-position: top; | 背景图顶部 | |
bg-bottom | background-position: bottom; | 背景图底部 | |
bg-no-repeat | background-repeat: no-repeat; | 背景不重复 | |
bg-repeat | background-repeat: repeat; | 背景重复 | |
bg-fixed | background-attachment: fixed; | 背景固定 | |
bg-local | background-attachment: local; | 背景随内容滚动 | |
bg-scroll | background-attachment: scroll; | 背景随容器滚动 | |
bg-gradient-to-r | background-image: linear-gradient(to right, ...); | 向右渐变 | |
bg-gradient-to-b | background-image: linear-gradient(to bottom, ...); | 向下渐变 | |
bg-gradient-to-br | background-image: linear-gradient(to bottom right, ...); | 向右下渐变 | |
from-blue-500 | --tw-gradient-from: #3b82f6; | 渐变起始色 | |
to-purple-500 | --tw-gradient-to: #a855f7; | 渐变终止色 | |
via-green-500 | --tw-gradient-stops: ..., #22c55e, ...; | 渐变中间色 |
Borders35 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
border | border-width: 1px; | 1px边框 | |
border-0 | border-width: 0px; | 无边框 | |
border-2 | border-width: 2px; | 2px边框 | |
border-4 | border-width: 4px; | 4px边框 | |
border-t | border-top-width: 1px; | 顶部边框 | |
border-r | border-right-width: 1px; | 右侧边框 | |
border-b | border-bottom-width: 1px; | 底部边框 | |
border-l | border-left-width: 1px; | 左侧边框 | |
border-solid | border-style: solid; | 实线边框 | |
border-dashed | border-style: dashed; | 虚线边框 | |
border-dotted | border-style: dotted; | 点线边框 | |
border-double | border-style: double; | 双线边框 | |
border-none | border-style: none; | 无边框样式 | |
border-gray-200 | border-color: #e5e7eb; | 浅灰边框色 | |
border-gray-300 | border-color: #d1d5db; | 灰色边框色 | |
border-gray-800 | border-color: #1f2937; | 深灰边框色 | |
border-blue-500 | border-color: #3b82f6; | 蓝色边框色 | |
border-red-500 | border-color: #ef4444; | 红色边框色 | |
border-transparent | border-color: transparent; | 透明边框色 | |
rounded-none | border-radius: 0px; | 无圆角 | |
rounded-sm | border-radius: 0.125rem; | 小圆角 | |
rounded | border-radius: 0.25rem; | 默认圆角 | |
rounded-md | border-radius: 0.375rem; | 中等圆角 | |
rounded-lg | border-radius: 0.5rem; | 大圆角 | |
rounded-xl | border-radius: 0.75rem; | 特大圆角 | |
rounded-2xl | border-radius: 1rem; | 2倍大圆角 | |
rounded-full | border-radius: 9999px; | 完全圆角（圆形） | |
rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; | 顶部大圆角 | |
rounded-b-lg | border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; | 底部大圆角 | |
ring-1 | box-shadow: 0 0 0 1px var(--tw-ring-color); | 1px环形 | |
ring-2 | box-shadow: 0 0 0 2px var(--tw-ring-color); | 2px环形 | |
ring-blue-500 | --tw-ring-color: #3b82f6; | 蓝色环形 | |
divide-x | > * + * { border-left-width: 1px; } | 子元素垂直分隔线 | |
divide-y | > * + * { border-top-width: 1px; } | 子元素水平分隔线 | |
divide-gray-200 | > * + * { border-color: #e5e7eb; } | 分隔线灰色 |
Effects19 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
shadow-sm | box-shadow: 0 1px 2px rgba(0,0,0,0.05); | 小阴影 | |
shadow | box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); | 默认阴影 | |
shadow-md | box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); | 中等阴影 | |
shadow-lg | box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); | 大阴影 | |
shadow-xl | box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04); | 特大阴影 | |
shadow-2xl | box-shadow: 0 25px 50px rgba(0,0,0,0.25); | 2倍大阴影 | |
shadow-inner | box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); | 内阴影 | |
shadow-none | box-shadow: 0 0 #0000; | 无阴影 | |
shadow-blue-500/50 | box-shadow: ... rgba(59,130,246,0.5); | 蓝色阴影 | |
opacity-0 | opacity: 0; | 完全透明 | |
opacity-5 | opacity: 0.05; | 透明度5% | |
opacity-10 | opacity: 0.1; | 透明度10% | |
opacity-25 | opacity: 0.25; | 透明度25% | |
opacity-50 | opacity: 0.5; | 透明度50% | |
opacity-75 | opacity: 0.75; | 透明度75% | |
opacity-100 | opacity: 1; | 完全不透明 | |
mix-blend-multiply | mix-blend-mode: multiply; | 正片叠底混合 | |
mix-blend-screen | mix-blend-mode: screen; | 滤色混合 | |
mix-blend-overlay | mix-blend-mode: overlay; | 叠加混合 |
Filters39 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
blur-none | filter: blur(0); | 无模糊 | |
blur-sm | filter: blur(4px); | 小模糊 | |
blur | filter: blur(8px); | 默认模糊 | |
blur-md | filter: blur(12px); | 中等模糊 | |
blur-lg | filter: blur(16px); | 大模糊 | |
blur-xl | filter: blur(24px); | 特大模糊 | |
blur-2xl | filter: blur(40px); | 2倍模糊 | |
blur-3xl | filter: blur(64px); | 3倍模糊 | |
brightness-0 | filter: brightness(0); | 亮度0（全黑） | |
brightness-50 | filter: brightness(0.5); | 亮度50% | |
brightness-100 | filter: brightness(1); | 正常亮度 | |
brightness-125 | filter: brightness(1.25); | 亮度125% | |
brightness-150 | filter: brightness(1.5); | 亮度150% | |
brightness-200 | filter: brightness(2); | 亮度200% | |
contrast-50 | filter: contrast(0.5); | 对比度50% | |
contrast-100 | filter: contrast(1); | 正常对比度 | |
contrast-150 | filter: contrast(1.5); | 对比度150% | |
grayscale-0 | filter: grayscale(0); | 无灰度 | |
grayscale | filter: grayscale(100%); | 完全灰度 | |
invert-0 | filter: invert(0); | 不反转 | |
invert | filter: invert(100%); | 颜色反转 | |
sepia-0 | filter: sepia(0); | 无褐色 | |
sepia | filter: sepia(100%); | 完全褐色 | |
saturate-50 | filter: saturate(0.5); | 饱和度50% | |
saturate-100 | filter: saturate(1); | 正常饱和度 | |
saturate-150 | filter: saturate(1.5); | 饱和度150% | |
saturate-200 | filter: saturate(2); | 饱和度200% | |
hue-rotate-0 | filter: hue-rotate(0deg); | 色相旋转0° | |
hue-rotate-90 | filter: hue-rotate(90deg); | 色相旋转90° | |
hue-rotate-180 | filter: hue-rotate(180deg); | 色相旋转180° | |
drop-shadow-sm | filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); | 小投影 | |
drop-shadow | filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) drop-shadow(0 1px 1px rgba(0,0,0,0.06)); | 默认投影 | |
drop-shadow-md | filter: drop-shadow(0 4px 3px rgba(0,0,0,0.1)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)); | 中等投影 | |
drop-shadow-lg | filter: drop-shadow(0 10px 8px rgba(0,0,0,0.1)) drop-shadow(0 4px 3px rgba(0,0,0,0.08)); | 大投影 | |
backdrop-blur-sm | backdrop-filter: blur(4px); | 背景小模糊 | |
backdrop-blur | backdrop-filter: blur(8px); | 背景默认模糊 | |
backdrop-blur-md | backdrop-filter: blur(12px); | 背景中模糊 | |
backdrop-blur-lg | backdrop-filter: blur(16px); | 背景大模糊 | |
backdrop-blur-xl | backdrop-filter: blur(24px); | 背景特大模糊 |
Transitions30 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
transition-none | transition-property: none; | 无过渡 | |
transition-all | transition-property: all; | 所有属性过渡 | |
transition | transition-property: color, background-color, border-color, opacity, box-shadow, transform; | 默认过渡属性 | |
transition-colors | transition-property: color, background-color, border-color; | 颜色过渡 | |
transition-opacity | transition-property: opacity; | 透明度过渡 | |
transition-shadow | transition-property: box-shadow; | 阴影过渡 | |
transition-transform | transition-property: transform; | 变换过渡 | |
duration-75 | transition-duration: 75ms; | 过渡75ms | |
duration-100 | transition-duration: 100ms; | 过渡100ms | |
duration-150 | transition-duration: 150ms; | 过渡150ms | |
duration-200 | transition-duration: 200ms; | 过渡200ms | |
duration-300 | transition-duration: 300ms; | 过渡300ms | |
duration-500 | transition-duration: 500ms; | 过渡500ms | |
duration-700 | transition-duration: 700ms; | 过渡700ms | |
duration-1000 | transition-duration: 1000ms; | 过渡1000ms | |
ease-linear | transition-timing-function: linear; | 线性缓动 | |
ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); | 加速缓动 | |
ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); | 减速缓动 | |
ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | 先加速后减速 | |
delay-75 | transition-delay: 75ms; | 延迟75ms | |
delay-100 | transition-delay: 100ms; | 延迟100ms | |
delay-150 | transition-delay: 150ms; | 延迟150ms | |
delay-300 | transition-delay: 300ms; | 延迟300ms | |
delay-500 | transition-delay: 500ms; | 延迟500ms | |
delay-700 | transition-delay: 700ms; | 延迟700ms | |
animate-none | animation: none; | 无动画 | |
animate-spin | animation: spin 1s linear infinite; | 旋转动画 | |
animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; | 脉冲动画 | |
animate-pulse | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | 呼吸动画 | |
animate-bounce | animation: bounce 1s infinite; | 弹跳动画 |
Transforms41 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
scale-0 | transform: scale(0); | 缩放0 | |
scale-50 | transform: scale(0.5); | 缩放50% | |
scale-75 | transform: scale(0.75); | 缩放75% | |
scale-90 | transform: scale(0.9); | 缩放90% | |
scale-95 | transform: scale(0.95); | 缩放95% | |
scale-100 | transform: scale(1); | 原始大小 | |
scale-105 | transform: scale(1.05); | 缩放105% | |
scale-110 | transform: scale(1.1); | 缩放110% | |
scale-125 | transform: scale(1.25); | 缩放125% | |
scale-150 | transform: scale(1.5); | 缩放150% | |
scale-x-100 | transform: scaleX(1); | 水平缩放100% | |
scale-y-100 | transform: scaleY(1); | 垂直缩放100% | |
rotate-0 | transform: rotate(0deg); | 旋转0° | |
rotate-1 | transform: rotate(1deg); | 旋转1° | |
rotate-3 | transform: rotate(3deg); | 旋转3° | |
rotate-6 | transform: rotate(6deg); | 旋转6° | |
rotate-12 | transform: rotate(12deg); | 旋转12° | |
rotate-45 | transform: rotate(45deg); | 旋转45° | |
rotate-90 | transform: rotate(90deg); | 旋转90° | |
rotate-180 | transform: rotate(180deg); | 旋转180° | |
-rotate-45 | transform: rotate(-45deg); | 逆时针旋转45° | |
-rotate-90 | transform: rotate(-90deg); | 逆时针旋转90° | |
translate-x-0 | transform: translateX(0); | 水平位移0 | |
translate-x-1 | transform: translateX(0.25rem); | 水平位移0.25rem | |
translate-x-4 | transform: translateX(1rem); | 水平位移1rem | |
translate-x-full | transform: translateX(100%); | 水平位移100% | |
translate-x-1/2 | transform: translateX(50%); | 水平位移50% | |
-translate-x-full | transform: translateX(-100%); | 水平位移-100% | |
translate-y-0 | transform: translateY(0); | 垂直位移0 | |
translate-y-1 | transform: translateY(0.25rem); | 垂直位移0.25rem | |
translate-y-4 | transform: translateY(1rem); | 垂直位移1rem | |
translate-y-full | transform: translateY(100%); | 垂直位移100% | |
-translate-y-full | transform: translateY(-100%); | 垂直位移-100% | |
skew-x-3 | transform: skewX(3deg); | 水平倾斜3° | |
skew-x-6 | transform: skewX(6deg); | 水平倾斜6° | |
skew-y-3 | transform: skewY(3deg); | 垂直倾斜3° | |
skew-y-6 | transform: skewY(6deg); | 垂直倾斜6° | |
origin-center | transform-origin: center; | 变换原点居中 | |
origin-top | transform-origin: top; | 变换原点顶部 | |
origin-top-right | transform-origin: top right; | 变换原点右上 | |
origin-bottom-left | transform-origin: bottom left; | 变换原点左下 |
Interactivity29 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
cursor-auto | cursor: auto; | 自动光标 | |
cursor-default | cursor: default; | 默认光标 | |
cursor-pointer | cursor: pointer; | 手型光标 | |
cursor-wait | cursor: wait; | 等待光标 | |
cursor-text | cursor: text; | 文本光标 | |
cursor-move | cursor: move; | 移动光标 | |
cursor-not-allowed | cursor: not-allowed; | 禁止光标 | |
cursor-grab | cursor: grab; | 抓取光标 | |
cursor-grabbing | cursor: grabbing; | 抓取中光标 | |
pointer-events-none | pointer-events: none; | 禁用指针事件 | |
pointer-events-auto | pointer-events: auto; | 启用指针事件 | |
resize-none | resize: none; | 禁止调整大小 | |
resize | resize: both; | 可调整大小 | |
resize-x | resize: horizontal; | 水平调整大小 | |
resize-y | resize: vertical; | 垂直调整大小 | |
select-none | user-select: none; | 禁止选择文本 | |
select-text | user-select: text; | 可选择文本 | |
select-all | user-select: all; | 点击全选 | |
select-auto | user-select: auto; | 自动选择 | |
scroll-auto | scroll-behavior: auto; | 自动滚动 | |
scroll-smooth | scroll-behavior: smooth; | 平滑滚动 | |
snap-start | scroll-snap-align: start; | 对齐起点 | |
snap-center | scroll-snap-align: center; | 对齐中心 | |
snap-end | scroll-snap-align: end; | 对齐终点 | |
snap-mandatory | scroll-snap-type: ... mandatory; | 强制对齐 | |
snap-proximity | scroll-snap-type: ... proximity; | 接近对齐 | |
touch-auto | touch-action: auto; | 自动触摸行为 | |
touch-none | touch-action: none; | 禁用触摸 | |
touch-manipulation | touch-action: manipulation; | 触摸操作优化 |
SVG7 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
fill-current | fill: currentColor; | 填充当前颜色 | |
fill-none | fill: none; | 无填充 | |
fill-red-500 | fill: #ef4444; | 红色填充 | |
stroke-current | stroke: currentColor; | 描边当前颜色 | |
stroke-none | stroke: none; | 无描边 | |
stroke-1 | stroke-width: 1; | 描边宽度1 | |
stroke-2 | stroke-width: 2; | 描边宽度2 |
Accessibility4 个类
| 类名 | CSS 等价 | 示例说明 | 操作 |
|---|---|---|---|
sr-only | position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; | 仅屏幕阅读器可见 | |
not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; | 取消仅屏幕阅读器 | |
forced-color-adjust-auto | forced-color-adjust: auto; | 强制颜色自动调整 | |
forced-color-adjust-none | forced-color-adjust: none; | 禁用强制颜色调整 |
Tailwind CSS 速查表使用说明
功能特点
- 分类浏览 - 按布局、弹性盒、间距等分类快速查找
- 关键字搜索 - 输入类名或 CSS 属性名即时过滤
- 点击复制 - 一键复制类名到剪贴板
- CSS 映射 - 查看每个类名对应的 CSS 属性
使用技巧
- 响应式前缀：
sm:md:lg:xl:2xl: - 暗色模式前缀：
dark:，如dark:bg-gray-900 - 状态前缀：
hover:focus:active:disabled: - 组合使用：
<div class="md:flex dark:bg-gray-900 hover:shadow-lg">