Tailwind CSS常见组合用法

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