1、一般布局组合
 
    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
 
|  |  | 
|---|
| flex | 将元素的显示类型设置为 flexbox。这意味着子元素将以 flex 项的方式排列。 | 
| min-h-screen | 将元素的最小高度设置为全屏高度(视口高度)。这意味着该元素的最小高度将与浏览器窗口的高度相等。 | 
| flex-col | 将 flex 容器的主轴方向设置为垂直方向,即子元素将按列排列。 | 
| items-center | 设置弹性容器的交叉轴对齐方式为居中,这就意味着子元素在交叉轴(在这种情况下为水平轴)上会被居中对齐。 | 
| justify-between | 在主轴方向(垂直方向)上,子元素之间的空间会被均匀分配,首尾元素会分别对齐到容器的顶部和底部。 | 
| p-24 | 设置元素的内边距,p-24 表示四个方向的内边距都为 6rem( | 
 
综合起来,这些类一起使用时,形成一个最小高度为全屏、垂直排布、子元素居中并且相互之间有一定间距的布局。这种布局方式适合需要响应式设计和灵活排列的场景,常用于创建首页、中心内容区域或其他需要对齐的组件。
 
对比 flex-col 和 flex-row。可以记住:
 flex-row:元素像行(横向)排列,可以联想成一排排座椅。
 flex-col:元素像列(纵向)排列,可以联想成梯子。
 
2、text-{size} 类用于设置文本的大小
 
| 类名 | 描述 | 大小 | 
|---|
| text-xs | 极小字体 | 大约 0.75rem(12px) | 
| text-sm | 小字体 | 大约 0.875rem(14px) | 
| text-base | 基础字体 | 通常是 1rem(16px) | 
| text-lg | 大字体 | 大约 1.125rem(18px) | 
| text-xl | 更大字体 | 大约 1.25rem(20px) | 
| text-2xl | 非常大字体 | 大约 1.5rem(24px) | 
| text-3xl | 巨型字体 | 大约 1.875rem(30px) | 
| text-4xl | 超大字体 | 大约 2.25rem(36px) | 
| text-5xl | 超巨型字体 | 大约 3rem(48px) | 
| text-6xl | 极巨型字体 | 大约 3.75rem(60px) | 
| text-7xl | 超级巨型字体 | 大约 4.5rem(72px) | 
| text-8xl | 无敌巨型字体 | 大约 6rem(96px) | 
| text-9xl | 至尊巨型字体 | 大约 8rem(128px) | 
 
3、 text-{color} 类用于设置文本的颜色
 
4、组合样式
 
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-3 rounded" type="submit"> 提交</button>
 
| 类名 | 含义 | 
|---|
| bg-blue-500 | 设置按钮的背景色为蓝色(500阶梯)。 | 
| hover:bg-blue-700 | 鼠标悬停时,将按钮的背景色变为蓝色(700阶梯),提供交互反馈。 | 
| text-white | 设置按钮文本颜色为白色,以确保在蓝色背景上清晰可读。 | 
| font-bold | 将按钮的字体设置为加粗,使得文本更加醒目。 | 
| py-2 | 设置按钮上下内边距(padding)为 0.5rem(8px),增加按钮的高度。 | 
| px-4 | 设置按钮左右内边距(padding)为 1rem(16px),增加按钮的宽度。 | 
| m-3 | 设置按钮的外边距(margin)为 0.75rem(12px),使按钮与周围元素有间隔。 | 
| rounded | 为按钮添加圆角效果,使其角部有一定的圆润度。 | 
| type="submit" | 指定按钮的类型为“提交”按钮,在表单中使用,点击将提交包含的表单。 | 
| 效果 |  |