Tailwind CSS 速查表
可搜索、可打印的 Tailwind CSS 参考——布局、flexbox、grid、间距、排版、颜色、状态和响应式前缀。免费。
Layout
12container mx-auto px-4
Centered max-width page container
block / inline-block / inline
Display modes
flex / grid / hidden
Flexbox, grid, or display:none
relative / absolute / fixed / sticky
Position modes
inset-0
top/right/bottom/left: 0
top-4 right-2 bottom-0 left-1/2
Offset a positioned element
z-10 / z-50 / z-[999]
Stacking order (z-index)
overflow-hidden / overflow-y-auto
Clip or scroll overflowing content
float-right / clear-both
Floats (rarely needed)
box-border / box-content
Box sizing model
isolation-isolate
New stacking context
object-cover object-center
Image fill behavior (like bg-size)
Flexbox
12flex flex-row / flex-col
Flex container + direction
flex-wrap / flex-nowrap
Allow or prevent wrapping
items-center / items-start / items-end
Cross-axis alignment
justify-center / justify-between
Main-axis distribution
justify-start / justify-end / justify-around
More main-axis options
gap-4 / gap-x-2 / gap-y-6
Gap between flex/grid children
flex-1
Grow and shrink to fill space
flex-none / flex-auto
Fixed size / natural + grow
grow / grow-0 / shrink-0
Individual grow/shrink control
basis-1/2 / basis-64
Initial main size (flex-basis)
self-center / self-stretch
Per-item cross alignment
order-first / order-2 / order-last
Visual reordering
Grid
12grid grid-cols-3 gap-4
3-column grid with gaps
grid-cols-[200px_1fr]
Custom track sizes (arbitrary)
col-span-2 / col-span-full
Item spans columns
col-start-2 col-end-4
Explicit column placement
grid-rows-3 / row-span-2
Row tracks and spans
grid-flow-col / grid-flow-dense
Auto-placement direction
auto-cols-fr / auto-rows-min
Implicit track sizing
place-items-center
Center items both axes
place-content-center
Center the whole grid content
justify-items-start / content-end
Fine-grained grid alignment
grid-cols-[repeat(auto-fill,minmax(250px,1fr))]
Responsive card grid, no media queries
subgrid
Inherit parent tracks (v4)
Spacing
11p-4
Padding all sides (1rem)
px-4 py-2
Horizontal / vertical padding
pt-2 pr-4 pb-6 pl-8
Per-side padding
m-4 / mx-auto
Margin / horizontal centering
-mt-4
Negative margin
space-y-4
Vertical gap between children
space-x-2
Horizontal gap between children
p-0 p-px p-0.5 p-1 ... p-96
Scale: 1 unit = 0.25rem (4px)
p-[18px]
Arbitrary padding value
ps-4 / pe-4 / ms-auto
Logical (RTL-aware) start/end
scroll-mt-24
Anchor offset under fixed header
Sizing
11w-full / w-screen
100% width / viewport width
w-1/2 w-1/3 w-2/3 w-1/4
Fractional widths
w-64 / w-px / w-[137px]
Fixed widths (scale or arbitrary)
max-w-md / max-w-prose / max-w-7xl
Max width presets
min-w-0
Allow flex children to shrink
h-full / h-screen / h-dvh
Full height (dvh = mobile-safe)
min-h-screen
At least viewport height
max-h-96 overflow-y-auto
Capped height, scroll inside
size-10
Width + height together
w-fit / w-max / w-min
Content-based widths
aspect-square / aspect-video
Aspect ratio boxes
Typography
13text-xs text-sm text-base text-lg text-xl
Font size scale (up to 9xl)
font-normal font-medium font-semibold font-bold
Font weights
italic / not-italic
Font style
text-left / text-center / text-right
Text alignment
leading-tight / leading-relaxed
Line height
tracking-tight / tracking-wide
Letter spacing
uppercase / capitalize / normal-case
Text transform
underline / line-through / no-underline
Text decoration
truncate
One line + ellipsis
whitespace-nowrap / break-words
Wrapping control
font-sans / font-serif / font-mono
Font family stacks
tabular-nums
Fixed-width digits (tables)
text-balance / text-pretty
Nicer heading/paragraph wraps
Colors & backgrounds
12text-gray-700 / text-blue-600
Text color (shades 50–950)
bg-white / bg-slate-900
Background color
bg-blue-500/50
Color with 50% opacity
text-white bg-black
Plain black and white
bg-transparent / bg-current
Transparent / currentColor
bg-gradient-to-r from-blue-500 to-purple-600
Linear gradient
via-pink-500
Gradient middle stop
bg-cover bg-center bg-no-repeat
Background image sizing
bg-[url('/img/hero.jpg')]
Arbitrary background image
text-[#1da1f2]
Arbitrary hex color
accent-blue-600
Checkbox / radio accent color
fill-current / stroke-current
SVG inherits text color
Borders, radius & shadows
12border border-gray-200
1px border with color
border-2 / border-t / border-b-4
Width and per-side borders
border-dashed / border-dotted
Border style
rounded / rounded-lg / rounded-full
Border radius
rounded-t-xl / rounded-l-none
Per-corner/side radius
shadow-sm shadow-md shadow-lg shadow-xl
Box shadow scale
shadow-none
Remove shadow
shadow-blue-500/50
Colored shadow
ring-2 ring-blue-500 ring-offset-2
Focus ring (outline-like)
outline-none focus-visible:ring-2
Accessible focus styling
divide-y divide-gray-200
Borders between children
border-[3px] rounded-[14px]
Arbitrary border values
States & responsive prefixes
14hover:bg-blue-600
On hover
focus:ring-2 / focus-visible:ring-2
On focus (keyboard-aware)
active:scale-95
While pressed
disabled:opacity-50
Disabled form elements
sm: md: lg: xl: 2xl:
Breakpoints 640/768/1024/1280/1536
hidden md:block
Show only from md upward
flex-col md:flex-row
Stack on mobile, row on desktop
dark:bg-gray-900 dark:text-white
Dark mode variant
group + group-hover:opacity-100
Style child on parent hover
peer + peer-checked:block
Style sibling by input state
first:pt-0 last:pb-0 odd:bg-gray-50
Structural pseudo-classes
max-md:hidden
Below a breakpoint only
md:hover:bg-blue-700
Stack variants (order matters)
motion-reduce:transition-none
Respect reduced motion
Transitions & animation
12transition
Animate common properties
transition-colors duration-200
Only colors, 200ms
duration-75 ... duration-1000
Transition duration scale
ease-in / ease-out / ease-in-out
Timing functions
delay-150
Transition delay
hover:scale-105 transition-transform
Grow slightly on hover
rotate-45 / -rotate-90
Rotation
translate-x-4 / -translate-y-1/2
Translation
animate-spin
Loading spinner rotation
animate-pulse
Skeleton loading pulse
animate-bounce / animate-ping
Bounce / radar ping
will-change-transform
Hint for smoother animation
Component recipes
13flex items-center justify-center
Center anything (flex)
grid place-items-center
Center anything (grid)
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
Absolute centering
truncate
Single-line ellipsis (needs width)
line-clamp-3
Multi-line clamp with ellipsis
aspect-video w-full object-cover
16:9 media that fills its box
sticky top-0 z-50 bg-white/80 backdrop-blur
Frosted sticky header
fixed inset-0 bg-black/50
Modal backdrop overlay
rounded-xl border bg-white p-6 shadow-sm
Basic card
inline-flex items-center gap-2 rounded-lg px-4 py-2
Button base (icon + label)
sr-only
Visually hidden, screen-reader OK
divide-y > li py-3
Clean list with separators
min-h-screen flex flex-col + footer mt-auto
Sticky footer layout
Config & arbitrary values
13w-[137px] / top-[13%]
Arbitrary value in brackets
bg-[#bada55] / text-[22px]
Arbitrary color / font size
grid-cols-[1fr_2fr_1fr]
Underscores stand for spaces
w-[calc(100%-2rem)]
calc() in arbitrary values
text-(--brand-color)
CSS variable shorthand (v4)
[&>li]:mt-2
Arbitrary variant (child selector)
[&:nth-child(3)]:bg-red-100
Arbitrary pseudo selector
has-[:checked]:ring-2
Parent styled by descendant
data-[state=open]:rotate-180
Style by data attribute
@theme { --color-brand: #1e40af; }
v4: design tokens in CSS
theme.extend.colors.brand (v3)
v3: extend tailwind.config.js
@apply flex items-center gap-2;
Reuse utilities in CSS (sparingly)
!mt-0 (v3) / mt-0! (v4)
Important modifier
没有条目匹配“:q”。
关于 Tailwind CSS 速查表
这份 Tailwind CSS 速查表将你日常使用的工具类列在一个可搜索的页面上：布局、Flexbox、Grid、间距、尺寸、排版、颜色和背景、边框、圆角和阴影、状态和响应式前缀、过渡和动画、组件配方，以及配置和任意值。
每一行将类名与其实际效果配对，因此它可以作为双向翻译表——你可以查找已知 CSS 属性对应的工具类，也可以查看别人标记中某个不熟悉的类名到底做了什么。
本速查表免费且在客户端运行：使用搜索框实时过滤行，通过固定目录在章节间跳转，点击即可复制任何类名，还可以打印页面作为桌边参考。
如何使用 Tailwind CSS 速查表
- 浏览各章节，从“布局”和“Flexbox”到“颜色和背景”和“配置和任意值”。
- 搜索类名或 CSS 属性如 justify、gap 或 shadow 以实时过滤。
- 跳转到“状态和响应式前缀”查看 hover、focus、暗色模式和断点变体。
- 点击类名或其复制图标，将其复制到剪贴板。
- 打印本速查表获取离线 Tailwind 参考。
常见问题
十二个章节：布局、Flexbox、Grid、间距、尺寸、排版、颜色和背景、边框、圆角和阴影、状态和响应式前缀、过渡和动画、组件配方，以及配置和任意值。
是的。专门的章节涵盖了 sm:、md:、lg: 和 xl: 断点，以及 hover:、focus:、active:、disabled:、group-hover: 和 dark: 变体。
组件配方章节从速查表其余部分的工具类中组装了常见模式——卡片、按钮、居中容器、响应式网格。
可以。点击任意行或其复制图标，类名即可复制到剪贴板并显示简短确认。
是的，完全免费——可搜索、可打印，在浏览器中渲染，无需注册。
热门搜索
tailwind 速查表
tailwind css 类名
tailwind flex 类名
tailwind grid 类名
tailwind 间距刻度
tailwind 响应式前缀
tailwind css 参考手册
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。