Tailwind设置gap-0仍有卡片间距、内容无法居中问题求助

卡片间多余间距问题 #

• 父级设置gap-0无效的核心原因：间距来源是单卡片组件自身携带的水平外边距（比如原单卡片示例自带的mx-3/mx-auto类），并非父容器flex/grid布局的gap间隙，所以修改父级gap属性无法消除该间距。
• 修复操作：直接删除单卡片组件上自带的水平方向外边距类即可。

页面内容左上角渲染、未居中问题 #

• 核心原因：最外层根容器未设置视口级高度基准，默认块级元素高度由内部内容撑开，居中属性缺少高度参照无法生效。
• 修复操作：给包裹所有内容的最外层容器添加如下类：
  • min-h-screen：让容器高度铺满整个浏览器视口
  • flex：开启弹性布局
  • items-center：实现垂直方向居中
  • justify-center：实现水平方向居中

如果是多卡片换行的网格布局，也可以给外层容器用grid+place-content-center实现全方向居中，效果一致。

内容的提问来源于stack exchange，提问作者charmy