Tailwind Grid布局中导航栏高度无法修改且需保持全屏布局的问题

问题核心在于Grid行高规则没匹配需求，同时要兼顾全屏布局，纯Tailwind实现方案如下：

• 保留全屏容器：父Grid容器必须保留h-screen w-screen，否则容器高度仅由内容撑开，无法占满全屏。
• 明确Grid行高规则：给父Grid设置grid-rows-[32px_1fr]（或用Tailwind间距变量grid-rows-[theme(spacing.8)_1fr]，和h-8对应更统一），强制第一行高度为32px，第二行占满剩余屏幕空间。
• 导航栏填充满行高：给导航栏元素加h-full，让它完全占据Grid分配的32px行高；如果导航栏内容过多，可额外加overflow-hidden或overflow-y-auto控制溢出，避免撑开行高。

完整示例代码：

<div class="h-screen w-screen grid grid-rows-[theme(spacing.8)_1fr]">
  <nav class="h-full bg-slate-800 text-white flex items-center px-4">
    导航栏内容
  </nav>
  <main class="bg-slate-100 p-6">
    主内容区域
  </main>
</div>

为什么之前设置h-8无效？ #

如果父Grid用的是默认的grid-rows-auto或grid-rows-[auto_1fr]，第一行高度会由导航栏的内容高度决定——此时你给导航栏加h-8，要么内容高度超过32px导致行被撑开，要么内容高度小于32px导致导航栏仅显示内容高度，看起来h-8没生效。通过固定Grid行高，再让导航栏填充满该行，就能严格控制导航栏高度。

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