附录 C：Tailwind CSS 速查表（Cheat Sheet）

By Leeting Yan

目录

  1. 布局 Layout
  2. Flexbox
  3. Grid
  4. 尺寸 Sizing
  5. 间距 Spacing
  6. 排版 Typography
  7. 颜色 Colors
  8. 背景 Background
  9. 边框 Border
  10. 圆角 Radius
  11. 阴影 Shadow
  12. 透明度 Opacity
  13. 变换 Transform
  14. 动画 Animation
  15. 过渡 Transition
  16. 交互 Interactivity
  17. Position 定位
  18. Overflow
  19. 列表 / 表格
  20. 滚动 Scroll / Snap
  21. 状态选择器 Variants
  22. 响应式前缀 Responsive Prefix
  23. Arbitrary（任意值）
  24. 常用组件模式（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 / 工具站内容