附录 C:Tailwind CSS 速查表(Cheat Sheet)
By Leeting Yan
目录
- 布局 Layout
- Flexbox
- Grid
- 尺寸 Sizing
- 间距 Spacing
- 排版 Typography
- 颜色 Colors
- 背景 Background
- 边框 Border
- 圆角 Radius
- 阴影 Shadow
- 透明度 Opacity
- 变换 Transform
- 动画 Animation
- 过渡 Transition
- 交互 Interactivity
- Position 定位
- Overflow
- 列表 / 表格
- 滚动 Scroll / Snap
- 状态选择器 Variants
- 响应式前缀 Responsive Prefix
- Arbitrary(任意值)
- 常用组件模式(Button、Input、Card)速查
1. 布局 Layout
Display
block | inline-block | inline | flex | inline-flex | grid | inline-grid | hidden | table
Contain(新版)
contain | contain-strict | contain-size | contain-content
Box sizing
box-border | box-content
Float / Clear
float-right | float-left | float-none
clear-both | clear-none
2. Flexbox
容器
flex | inline-flex
flex-row | flex-row-reverse
flex-col | flex-col-reverse
flex-wrap | flex-nowrap | flex-wrap-reverse
对齐
justify-start | center | end | between | around | evenly
items-start | center | end | stretch
content-start | center | between | around
Flex 子项
flex-1 | flex-auto | flex-initial | flex-none
flex-grow | flex-grow-0
flex-shrink | flex-shrink-0
order-1 | order-last | order-none
3. Grid
列定义
grid-cols-1 … 12
grid-cols-none
grid-cols-[200px_1fr]
行定义
grid-rows-1 … 12
自动布局
auto-cols-auto | auto-cols-fr
auto-rows-auto | auto-rows-fr
间距
gap-1 … gap-96
gap-x-4 | gap-y-4
Span
col-span-2 | col-span-full
row-span-3
4. 尺寸 Sizing
Width
w-0 | w-px | w-1 … w-96
w-full | w-screen | w-auto
w-fit | w-min | w-max
w-[120px]
Height
h-0 | h-px | h-1 … h-96
h-full | h-screen | h-auto
h-fit
h-[60vh]
Min/Max
min-w-0 | min-w-full | max-w-screen-xl
min-h-screen | max-h-96
5. 间距 Spacing
统一 scale:0 | 0.5 | 1 | 1.5 | 2 | 2.5 … 96
Padding
p-4 | px-3 | py-2
pt-1 | pl-4 | pb-6
p-[32px]
Margin
m-4 | mx-auto | my-1
-ml-2 | -mt-4
6. 排版 Typography
字号
text-xs | sm | base | lg | xl | 2xl … 9xl
text-[32px]
字重
font-light | normal | medium | semibold | bold | black
行高
leading-none | tight | snug | normal | relaxed | loose
leading-[3rem]
文字对齐
text-left | center | right | justify
文本修饰
underline | line-through | no-underline
truncate | text-ellipsis | text-clip
7. 颜色 Colors(语法统一)
text-blue-500
bg-red-600
border-gray-300
fill-current | stroke-current
Tailwind 默认色板:
slate | gray | zinc | neutral | stone
red | orange | amber | yellow
lime | green | emerald | teal | cyan
sky | blue | indigo | violet | purple | fuchsia
pink | rose
8. 背景 Background
bg-blue-500
bg-gradient-to-r
from-blue-500 via-purple-500 to-pink-500
bg-[url('/img/bg.png')]
bg-cover | bg-contain | bg-center
9. 边框 Border
Width
border | border-2 | border-4 | border-8
border-t-2 | border-b-4
Color
border-gray-300
border-blue-500
10. 圆角 Radius
rounded-none | sm | md | lg | xl | 2xl | 3xl | full
rounded-[10px]
11. 阴影 Shadow
shadow-xs | sm | base | md | lg | xl | 2xl | inner | none
shadow-[0_4px_10px_rgba(0,0,0,0.1)]
12. 透明度 Opacity
opacity-0 | 25 | 50 | 75 | 100
13. 变换 Transform
transform
scale-95 | scale-110
rotate-45 | rotate-90
translate-x-2 | translate-y-1
skew-x-6 | skew-y-3
14. 动画 Animation
animate-spin
animate-pulse
animate-bounce
animate-ping
animate-[wiggle_1s_ease-in-out_infinite]
15. 过渡 Transition
transition
transition-colors
transition-opacity
duration-75 | 150 | 300
ease-linear | ease-in | ease-out | ease-in-out
16. 交互(Interactivity)
cursor-pointer | wait | not-allowed
select-none | select-text
pointer-events-none
resize | resize-y | resize-x
17. 定位 Position
static | relative | absolute | fixed | sticky
top-0 right-0 bottom-0 left-0
inset-0 | inset-x-0 | inset-y-0
z-0 | z-10 | z-50 | z-[999]
18. Overflow
overflow-hidden | overflow-auto | overflow-scroll
overflow-x-scroll | overflow-y-auto
19. 列表 / 表格
list-none | list-disc | list-decimal
table-auto | table-fixed
border-collapse | border-separate
20. 滚动 Scroll / Snap
scroll-smooth
snap-x | snap-y
snap-start | snap-center | snap-end
21. 状态 Variants
Hover / Focus / Active
hover:bg-blue-500
focus:ring-2
active:scale-95
Group
group-hover:text-white
Peer
peer-focus:border-blue-500
peer-invalid:text-red-500
ARIA / Data
aria-checked:bg-blue-500
data-[state=open]:rotate-180
22. 响应式前缀(所有类前加即可)
sm: md: lg: xl: 2xl:
例如:
md:text-lg
lg:px-8
sm:flex-col
23. Arbitrary Values(任意值)——最强特性
形式为 [value]:
w-[120px]
bg-[var(--brand-primary)]
text-[32px]
grid-cols-[1fr_2fr_1fr]
shadow-[0_0_10px_rgba(0,0,0,.3)]
Arbitrary 让 Tailwind 拥有无限扩展能力。
24. 常用组件模式(超简速查)
Button(样式配方)
inline-flex items-center justify-center
rounded-md
bg-primary text-primary-foreground
hover:bg-primary/90
disabled:opacity-50
Input
h-10 px-3 py-2 rounded-md border bg-background
focus-visible:ring-2 focus-visible:ring-ring
placeholder:text-muted-foreground
Card
rounded-xl border bg-card shadow-sm
p-6
Modal(Dialog Content)
fixed inset-0 flex items-center justify-center
bg-black/40 backdrop-blur-sm
rounded-xl border bg-background p-6
附录 C 总结
本附录内容具有以下特点:
- 覆盖 Tailwind 绝大部分使用场景
- 高可读性(按功能分类)
- 不冗余(真正常用速查内容)
- 与 shadcn/ui / Radix / SaaS 项目完全对齐
- 可以直接作为 PDF / 工具站内容