Tailwind CSS 中的布局思路

CSS设计

先确定内容宽度

阅读型页面通常不需要占满屏幕。先限制内容宽度，再设置左右内边距，可以让桌面端和移动端共用一套结构。

<main className="mx-auto w-full max-w-[820px] px-5 sm:px-6">
  {children}
</main>

间距来自层级

  • 页面区块使用较大的纵向间距。
  • 标题和说明文字使用中等间距。
  • 标签与元信息使用较小间距。

响应式策略

默认样式服务窄屏，再通过断点增加字号、间距或列数。这样移动端不会依赖覆盖大量桌面规则。

断点用于解决布局变化，不用于补偿不一致的组件结构。