Tailwind notes

flex

flex - 使用Flexbox布局，这是一个非常灵活的布局模式，用于在容器内部以动态的方式对子项进行排列。
justify-between - 在Flexbox布局中，这个类使容器中的子项之间的间距平均分布，首尾子项贴紧容器边界。
items-center - 在Flexbox布局中，这个类使得容器内的子项在交叉轴（默认为垂直方向）上居中对齐。
gap-2 - 在Flexbox或Grid布局中，设置容器中子项之间的间隙为2个尺寸单位。
flex-wrap - 允许Flex容器内的子项在必要时换行。

margin and padding

mb-10 - 设置元素的下外边距（margin-bottom）为10个尺寸单位。
mt-10
mr-2 - 设置元素的右外边距（margin-right）为2个尺寸单位。
ml-2
px-2 - 设置元素的左右内边距（padding）为2个尺寸单位。
py-1 - 设置元素的上下内边距（padding）为1个尺寸单位。
shadow-md - 应用中等强度的阴影效果。

tags / 🏷️ labels

inline-block - 设置元素为内联块级元素，这意味着元素可以在文本行内显示，同时能设置宽高。
rounded-full - 设置元素的圆角为完全圆形，适用于创建圆形元素。
rounded-lg - 给元素设置较大的圆角边框。
text-xs - 设置文字大小为极小。
mr-2 - 设置元素的右外边距（margin-right）为2个尺寸单位。
mb-2 - 设置元素的下外边距（margin-bottom）为2个尺寸单位。
border - 给元素添加边框。
b -

Layout

<div className="flex flex-col min-h-screen"><PageNav /><main className="flex-1 w-full max-w-4xl mx-auto px-4 mt-8 mb-8">{children}</main><Footer />
</div>

flex - 应用了 Flexbox 布局，这是一种 CSS 布局技术，旨在提供一种更有效的方式来排列、对齐和分配在容器内项目之间的空间，即使它们的大小未知或是动态变化的。
flex-col - 这个类使得 Flexbox 容器内的子元素沿着垂直方向排列（列布局），而不是默认的水平方向。
min-h-screen - 设置元素的最小高度为视口的高度，确保即使内容不足时，容器也会至少占满整个屏幕的高度。
flex-1 - 这个类在 Flexbox 布局中，允许 main 元素伸展以占用可用空间，使其成为可伸缩的。这意味着它会填充除了 PageNav 和 Footer 之外的空间。
w-full - 设置元素宽度为100%，即其父元素的全宽。
max-w-4xl - 设置元素的最大宽度为 4xl（在 Tailwind CSS 的默认配置中，这通常相当于 56rem 或 896px），用于保持内容在大屏幕上的可读性。
mx-auto - 设置元素的左右外边距为自动（margin-left: auto; margin-right: auto;），这使得元素在水平方向上居中。
px-4 - 设置元素的左右内边距（padding）为4个尺寸单位，用于保持内容不紧贴容器边缘，增加可读性。
mt-8 - 设置元素的上外边距（margin-top）为8个尺寸单位，创建与上方元素的空间。
mb-8 - 设置元素的下外边距（margin-bottom）为8个尺寸单位，创建与下方元素的空间。