Tailwind 速查

搜索 Tailwind 常用 utility 类，复制即用。

本地处理

布局

flexdisplay: flex

inline-flexdisplay: inline-flex

griddisplay: grid

hiddendisplay: none

blockdisplay: block

inlinedisplay: inline

Flex

flex-colflex-direction: column

items-centeralign-items: center

justify-centerjustify-content: center

justify-betweenjustify-content: space-between

gap-2gap: 0.5rem

gap-4gap: 1rem

flex-1flex: 1 1 0%

间距

p-4padding: 1rem

px-3 py-2padding: 0.5rem 0.75rem

m-automargin: auto

space-y-2> * + * { margin-top: 0.5rem }

尺寸

w-fullwidth: 100%

h-9height: 2.25rem

min-h-screenmin-height: 100vh

max-w-3xlmax-width: 48rem

排版

text-smfont-size: 0.875rem

text-basefont-size: 1rem

font-semiboldfont-weight: 600

tracking-tightletter-spacing: -0.025em

text-centertext-align: center

truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap

line-clamp-2-webkit-line-clamp: 2 (clamp 2 lines)

颜色

text-primarycolor: hsl(var(--primary))

text-muted-foregroundcolor: hsl(var(--muted-foreground))

bg-cardbackground-color: hsl(var(--card))

bg-primary/10background-color: hsl(var(--primary) / 0.1)

边框

borderborder-width: 1px

rounded-mdborder-radius: 8px

rounded-lgborder-radius: 12px

ring-2 ring-ring环形阴影

效果

shadow-soft柔和阴影

backdrop-blur-mdbackdrop-filter: blur(12px)

opacity-50opacity: 0.5

动画

transition-colorstransition-property: background, border, color

duration-150transition-duration: 150ms

animate-fade-in渐显动画 200ms

定位

absoluteposition: absolute

sticky top-0position: sticky; top: 0

inset-0top/right/bottom/left: 0

z-40z-index: 40

响应式

sm:flex md:hiddensm 显示，md 隐藏

lg:grid-cols-3lg 屏幕 grid 3 列

状态

hover:bg-primary/10hover 时背景

focus-visible:ring-2键盘聚焦环

group-hover:text-primary父级 hover 时变色（父级须 group）

dark:bg-zinc-900暗色模式背景

布局

Flex

间距

尺寸

排版

颜色

边框

效果

动画

定位

响应式

状态

相关工具