Tailwind CSS 的基本使用

• 每种颜色通常有 11 个色阶，50到950
• 后写的 class 会覆盖前面的
• px像素，rem根元素（1rem = 1 x font-size）

布局与对齐

• flex — 弹性布局容器
• items-center — 垂直居中对齐
• justify-between — 主轴两端对齐
• gap-4 — 间距 1rem

间距与尺寸

• p-4 — 内边距 1rem
• m-2 — 外边距 0.5rem
• h-10 — 高度 2.5rem
• min-h-screen — 最小高度为屏幕高度
• max-w-xl — 最大宽度为 XL
• w-full — 宽度 100%

边框与圆角

• border — 基础边框
• border-gray-300 — 灰色边框
• rounded — 圆角

颜色与背景

• bg-gray-100 — 浅灰色背景
• bg-white — 白色背景
• bg-blue-500 — 蓝色背景
• hover:bg-blue-600 — 悬停时蓝色加深

字体与文本

• text-center — 文本居中
• text-sm — 小号字体
• text-lg — 大号字体
• font-bold — 加粗字体
• font-medium — 中等粗细字体

其他样式

• shadow — 基础阴影
• transition — 过渡动画
• duration-300 — 动画时长 300ms
• cursor-pointer — 鼠标指针样式
• overflow-hidden — 隐藏溢出内容
• absolute — 绝对定位
• relative — 相对定位
• z-10 — 层级提升