1. 尺寸与定位 (Sizing & Layout)#
h-screen: 高度等于 100vh（视口高度）。h-min-screen: 最小高度等于 100vh（保证至少撑满屏幕，内容多时可扩展）。w-screen: 宽度等于 100vw（视口宽度）。w-3/4: 宽度设置为 75%。h-full: 高度设置为 100%（相对于父元素高度）。w-full: 宽度设置为 100%。gap-4: 网格或弹性布局的间隙大小（通常为 1rem / 16px）。
2. 背景与边框 (Background & Borders)#
bg-slate-50: 背景颜色设为极浅的石板色。bg-white: 背景颜色设为白色。hover:bg-slate-200: 鼠标悬停时背景变为浅灰色（石板色 200）。rounded-full: 彻底圆角（通常用于制作圆形按钮或药丸形状）。rounded-md: 中等圆角（标准卡片或按钮常用）。
3. 间距 (Spacing)#
p-1: 四周内边距（Padding）为 0.25rem / 4px。p-4: 四周内边距为 1rem / 16px。px-4: 左右（水平方向）内边距为 1rem / 16px。
4. 文本样式 (Typography)#
text-2xl: 字体大小设置为 1.5rem / 24px，行高 2rem。font-bold: 字体加粗。text-xs: 最小字体大小（通常为 12px）。tracking-widest: 字符间距最大化（增加字母之间的空隙）。text-gray-500: 文字颜色设为中灰色。
5. 响应式与复杂布局 (Responsive & Advanced)#
sm:w-1/2: 在 sm 屏幕（≥640px）及以上时，宽度为 50%。lg:w-1/5: 在 lg 屏幕（≥1024px）及以上时，宽度为 20%。flex-row: 弹性布局方向为水平行。scroll-auto: 溢出时根据内容自动显示滚动条。cursor-pointer: 鼠标悬停时显示小手图标（点击反馈）。line-clamp-1: 文本超出 1 行时显示省略号。line-clamp-2: 文本超出 2 行时显示省略号。