间距、布局与断点

间距

使用 Tailwind 默认的 4px 间距刻度，常用值如下：

examples/foundations/spacing.html

值	典型用途
1.5 · 6px	图标与小字之间、标签内元素
2 · 8px	标签与控件之间（gap-2）、按钮图标与文字
3 · 12px	按钮组、卡片内小元素
4 · 16px	卡片内分组、移动端页面左右边距
6 · 24px	卡片内边距、表单字段之间、卡片栅格间距
10 / 12 · 40 / 48px	区块标题与内容之间、页脚分栏
20 / 28 · 80 / 112px	区块上下内边距（移动端 / 桌面端）

原则：同一组内的元素间距小于组与组之间的间距。

页面容器

examples/foundations/layout.html

<section class="py-20 lg:py-28">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">…</div>
</section>

• 最大内容宽度 1280px（max-w-7xl），页头、区块、页脚使用同一个容器保证左右对齐
• 左右边距：手机 16px / 平板 24px / 桌面 32px
• 常用栅格：lg:grid-cols-12 配 5 + 7 列（标题 + 内容）、7 + 5 列（首屏）；卡片 md:grid-cols-2 lg:grid-cols-3
• 表单页面内容宽度 max-w-2xl（672px）；对话框见对话框 · 尺寸

断点

使用 Tailwind 默认断点，移动优先：不带前缀的类名作用于所有宽度，带前缀的类名从该宽度起生效。

前缀	最小宽度	本系统中的变化
（无）	0	单列布局，按钮通栏
sm	640px	按钮横排，表单双列，页面边距 24px
md	768px	卡片双列
lg	1024px	页头展开完整导航，12 列栅格启用，区块内边距加大
xl	1280px	页头显示持牌信息，导航间距加大

层级（z-index）

值	元素
z-30	多选面板等表单内浮层
z-50	吸顶页头、下拉菜单
z-[60]	Toast
顶层（top layer）	对话框（原生 <dialog>，无需 z-index）