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" | 指定按钮的类型为“提交”按钮,在表单中使用,点击将提交包含的表单。 |
效果 | |