Tailwind CSS 速查表 - Tailwind CSS 类名大全
Tailwind CSS 原子化 CSS 框架的必备工具类都在这里了，从布局到颜色、从响应式到动画，按功能分类整理，写页面时直接复制。
返回 Web 服务布局 Layout 7
container响应式容器，自动居中并设置 max-width
block / inline-block / inline显示类型
hidden隐藏元素（display: none）
relative / absolute / fixed / sticky定位方式
overflow-auto / overflow-hidden溢出处理
visible / invisible可见性控制
z-10 / z-50 / z-[-1]层叠顺序
Flexbox 7
flex启用弹性布局
flex-row / flex-col主轴方向（行/列）
flex-wrap / flex-nowrap是否换行
justify-start / justify-center / justify-between / justify-end主轴对齐
items-start / items-center / items-end交叉轴对齐
flex-1 / flex-auto / flex-none弹性伸缩
gap-4 / gap-x-4 / gap-y-4元素间距
Grid 7
grid启用网格布局
grid-cols-3 / grid-cols-12定义列数
grid-rows-3定义行数
col-span-2 / col-span-full跨列
row-span-2 / row-span-full跨行
place-items-center / place-content-center整体对齐
gap-4网格间距
间距与尺寸 8
p-4 / px-4 / py-2 / pt-4内边距 padding
m-4 / mx-auto / my-2 / mt-4外边距 margin（mx-auto 水平居中）
space-x-4 / space-y-4子元素间距
w-64 / w-1/2 / w-full / w-screen宽度
h-64 / h-1/2 / h-full / h-screen高度
max-w-lg / max-w-7xl / max-w-screen-xl最大宽度
min-h-screen / min-h-0最小高度
size-8 / size-16同时设置宽高（Tailwind 3.4+）
排版 Typography 9
text-xs / text-sm / text-base / text-lg / text-xl / text-2xl ... text-9xl字体大小
font-thin / font-normal / font-medium / font-bold / font-black字重
leading-none / leading-tight / leading-relaxed / leading-loose行高
tracking-tight / tracking-wide / tracking-wider字间距
text-left / text-center / text-right / text-justify文本对齐
underline / line-through / no-underline文本装饰
uppercase / lowercase / capitalize文本大小写转换
truncate文本溢出省略（单行）
whitespace-nowrap / break-words空白符处理
颜色与背景 7
text-red-500 / text-blue-600 / text-gray-900文本颜色（50-900 层级）
bg-white / bg-gray-100 / bg-blue-500背景颜色
border-gray-300 / border-red-500边框颜色
ring-2 ring-blue-500聚焦环颜色和宽度
shadow-sm / shadow-md / shadow-lg / shadow-xl盒子阴影
opacity-50 / opacity-100透明度
bg-gradient-to-r from-blue-500 to-purple-500渐变背景
响应式与交互 9
sm: / md: / lg: / xl: / 2xl:响应式断点前缀（移动优先）
hover:bg-blue-500鼠标悬停状态
focus:outline-none focus:ring-2聚焦状态
active:scale-95激活/点击状态
dark:bg-gray-800 dark:text-white暗色模式
transition / transition-all / transition-colors过渡动画
hover:scale-110 / hover:rotate-6变换动画
animate-spin / animate-ping / animate-pulse / animate-bounce内置动画
cursor-pointer / cursor-not-allowed鼠标样式
边框与特效 7
border / border-2 / border-4 / border-b-2边框宽度
border-solid / border-dashed / border-dotted / border-none边框样式
rounded-sm / rounded / rounded-lg / rounded-xl / rounded-full圆角
ring / ring-2 ring-inset轮廓环（常用于聚焦状态）
shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl阴影大小
outline / outline-2 outline-offset-2轮廓线
blur-sm / blur-lg / brightness-50 / contrast-125 / grayscale滤镜特效
💡 提示
- Tailwind 使用移动优先的响应式设计，sm: 表示 ≥640px，md: ≥768px，lg: ≥1024px
- 使用 dark: 前缀实现暗色模式，如 dark:bg-gray-800
- 使用 @apply 指令在 CSS 中复用 Tailwind 类
- 常用颜色层级：50/100/200/300/400/500/600/700/800/900，数字越大颜色越深
- 使用 JIT（Just-in-Time）模式，只有你使用的类才会被编译，文件极小