Tailwind CSS 速查表
常用工具类与内置动画
常用
布局、间距、颜色、响应式等
| 用法 | 说明 |
|---|---|
flex flex-col flex-row | 弹性布局 |
items-center justify-center | 对齐 |
gap-2 gap-4 gap-x-6 | 间距 |
p-4 px-6 py-2 m-4 mx-auto | 内边距/外边距 |
w-full w-1/2 max-w-4xl | 宽度 |
h-screen min-h-screen | 高度 |
text-sm text-lg font-bold | 文字大小与粗细 |
text-gray-600 text-blue-500 | 文字颜色 |
bg-white bg-gray-100 | 背景色 |
rounded rounded-xl | 圆角 |
border border-gray-200 | 边框 |
shadow shadow-lg | 阴影 |
hidden block inline-flex | 显示 |
md:flex lg:grid-cols-3 | 响应式前缀 |
hover:bg-gray-100 | 悬停状态 |
dark:bg-neutral-800 | 深色模式 |
grid grid-cols-2 grid-cols-3 | 网格布局 |
内置动画（animate-*）
默认主题内置的 keyframes，第三列为对应类名效果
| 用法 | 说明 | 示例 |
|---|---|---|
animate-none | 关闭动画 | |
animate-spin | 持续旋转（加载图标等） | |
animate-ping | 由中心向外缩放淡出（状态点、雷达效果） | |
animate-pulse | 透明度明暗变化（骨架屏、占位） | |
animate-bounce | 上下弹跳 | |