本附录将 Tailwind 所有常用原子类分为 15 大类，覆盖全部能力：

A.1 布局（Layout）

包含：

• 常规布局(display)
• 定位(position)
• Flex
• Grid
• 多列布局
• 隐藏控制

A.1.1 Display

block
inline-block
inline
flex
inline-flex
table
inline-table
table-row
table-cell
grid
inline-grid
contents
hidden

A.1.2 Position

static
fixed
absolute
relative
sticky

辅助类：

inset-0
top-0
right-0
bottom-0
left-0

inset-x-0
inset-y-0

支持 arbitrary：（非常常用）

top-[10px]
left-[50%]

A.1.3 Z-index

z-0
z-10
z-20
z-30
z-40
z-50
z-auto
z-[999]

A.1.4 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
content-start/center/between

Flex-grow / shrink

flex-grow
flex-grow-0
flex-shrink
flex-shrink-0

Gap

gap-1 ... gap-96
gap-x-4
gap-y-6

A.1.5 Grid

grid
grid-cols-1 ... grid-cols-12
grid-rows-1 ... grid-rows-12
grid-flow-row / col / dense
auto-rows-auto / auto-cols-auto

Gap

gap-x-4
gap-y-4

Span

col-span-1 ... col-span-12
row-span-1 ... row-span-12

A.1.6 Multi-column（多列布局）

columns-1 ... columns-12
columns-auto
columns-[260px]

A.2 尺寸（Sizing）

A.2.1 Width（w-*)

w-0
w-px
w-1 ... w-96
w-auto
w-full
w-screen
w-min
w-max
w-fit
w-[200px]

A.2.2 Height（h-*）

与 width 对应：

h-0
h-px
h-1 ... h-96
h-full
h-screen
h-fit

A.2.3 Min/Max

min-w-0 / min-w-full / min-w-[100px]
max-w-xs / sm / md / lg / xl / 2xl / 3xl...
max-w-screen-sm / md / lg / xl

min-h-0
min-h-full
max-h-screen

A.3 间距（Spacing）

Tailwind spacing scale：

0 0.5 1 1.5 2 2.5 ... 96

单位为 rem（默认 4px scale）。

A.3.1 Padding (p-*)

p-0 p-1 p-2 ... p-96
px-4 py-2
pt-4 pr-4 pb-4 pl-4
p-[10px]

A.3.2 Margin (m-*)

m-0 m-1 ... m-96
my-4 mx-2
-ml-4 (-负值支持)
m-auto

A.4 排版（Typography）

A.4.1 Font size

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl ... text-9xl
text-[32px]

A.4.2 Font weight

font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

A.4.3 Line-height

leading-none
leading-tight
leading-snug
leading-normal
leading-relaxed
leading-loose
leading-[3rem]

A.4.4 Letter spacing

tracking-tighter
tracking-tight
tracking-normal
tracking-wide
tracking-wider
tracking-widest

A.4.5 Text align

text-left
text-center
text-right
text-justify

A.4.6 Text color

text-black
text-white
text-gray-500
text-blue-600
text-red-500
text-primary-500 (自定义)
text-[var(--text-color)]

A.5 背景（Background）

A.5.1 Background color

bg-gray-100
bg-blue-500
bg-red-600
bg-primary-500
bg-[var(--bg)]

A.5.2 Gradient

bg-gradient-to-r
bg-gradient-to-b
from-blue-500
via-purple-500
to-pink-500

A.5.3 Background image

bg-none
bg-[url('/img/pattern.png')]

A.6 边框（Border）

A.6.1 Border width

border
border-0
border-2
border-4
border-8

A.6.2 Border color

border-gray-300
border-blue-500
border-red-300
border-[var(--border)]

A.6.3 Border radius

rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
rounded-[12px]

A.7 Outline & Ring（焦点样式）

A.7.1 Ring

ring
ring-1 ring-2 ring-4
ring-blue-500
ring-offset-2

A.7.2 Outline

outline
outline-none
outline-blue-500

A.8 阴影（Shadow）

shadow-xs
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none
shadow-[0_4px_12px_rgba(0,0,0,.15)]

A.9 过滤器（Filter / Backdrop）

A.9.1 Filter

filter
blur-sm blur-md blur-lg
brightness-50
contrast-125
grayscale
invert
sepia

A.9.2 Backdrop

backdrop-blur-sm
backdrop-brightness-50
backdrop-opacity-50

A.10 变换（Transform）

transform
scale-95 scale-100 scale-110
rotate-45 rotate-90
translate-x-4 translate-y-2
skew-x-6 skew-y-3

A.11 动画（Animation）

默认动画：

animate-spin
animate-ping
animate-pulse
animate-bounce

自定义 keyframes：

animate-[wiggle_1s_ease-in-out_infinite]

A.12 过渡（Transition）

transition
transition-colors
transition-opacity
duration-75
duration-150
ease-in
ease-out
ease-in-out

A.13 表格（Table）

table-auto
table-fixed
border-collapse
border-separate
caption-top caption-bottom

A.14 列表（List）

list-none
list-disc
list-decimal
marker:text-blue-500

A.15 交互（Interactivity）

A.15.1 Cursor

cursor-pointer
cursor-default
cursor-wait
cursor-not-allowed

A.15.2 User select

select-none
select-text
select-all
select-auto

A.15.3 Pointer events

pointer-events-none
pointer-events-auto

A.16 可见性（Visibility）

visible
invisible
collapse

A.17 Scroll（滚动控制）

overflow-auto
overflow-hidden
overflow-scroll
scroll-smooth
snap-x
snap-center

A.18 响应式（Responsive）

Tailwind 所有类都支持：

sm:
md:
lg:
xl:
2xl:

例如：

sm:text-sm
md:text-base
lg:text-lg
xl:text-xl

A.19 状态变体（State Variants）

Hover, Focus, Active…

hover:bg-blue-500
focus:ring
active:scale-95
focus-visible:ring-2

Group & Peer

group-hover:text-white
peer-focus:border-blue-500
peer-invalid:text-red-500

ARIA & Data 属性

aria-checked:bg-blue-500
data-[state=open]:rotate-180

（shadcn/ui 大量使用）

A.20 Arbitrary Values（任意值）

Tailwind 的所有体系最终都支持：

text-[32px]
w-[calc(100%-2rem)]
bg-[var(--primary)]
rounded-[10px]
grid-cols-[1fr_2fr]

这是 Tailwind 的终极扩展能力。

附录 A 总结

本附录提供了：

• Tailwind 全体系结构化分类
• 超过 2000+ 原子类覆盖
• 包含所有核心模块、功能、语法、示例
• 专业可作为公司内部 UI 手册