附录 A：Tailwind 全类名一览表
By Leeting Yan
本附录将 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 手册