Tailwind类名速查
Tailwind布局、间距、颜色、响应式类名速查
| 🎨 布局 | |
|---|---|
flex / grid / hidden / block | 弹性/网格/隐藏/块 |
items-center / justify-between | 交叉轴/主轴对齐 |
flex-col / flex-wrap / gap-4 | 纵向/换行/间距 |
grid-cols-3 / col-span-2 | 3列/跨2列 |
relative / absolute / fixed / sticky | 定位 |
top-0 left-0 z-10 | 偏移/层级 |
| 📏 间距尺寸 | |
p-4 / px-4 / py-2 | 内边距（全部/横/纵） |
m-2 / mx-auto / mt-4 | 外边距（全部/居中/上） |
w-full / h-screen / max-w-5xl | 宽高/最大宽 |
space-y-3 / divide-y | 子项纵向间隔/分隔线 |
| 🌈 文字颜色 | |
text-sm / text-lg / font-bold | 字号/粗细 |
text-center / truncate | 居中/超出省略 |
text-gray-700 / text-white | 文字颜色 |
bg-purple-600 / bg-white | 背景色 |
rounded-lg / shadow-md / border | 圆角/阴影/边框 |
| 📱 响应式 | |
md:flex / lg:grid | ≥768/1024生效 |
sm: / md: / lg: / xl: / 2xl: | 断点前缀 640/768/1024/1280/1536 |
hover:bg-blue-700 | 悬停态 |
dark:bg-gray-900 | 暗色模式 |
md:flex-row flex-col | 移动纵向桌面横向写法 |
📖 使用说明
本页为速查表，按分类查阅。
💬 用户评论 (0)
还没有评论，快来抢沙发！