min-h-screenとは

要素の高さを最低でも画面（ビューポート：ユーザーがブラウザで今見ている表示領域）いっぱいにするTailwindCSSのユーティリティクラスです。
CSSのmin-height: 100vh; と同じ意味ですが、min-h-screen は「最低高さ」を指定するだけなので、中のコンテンツが増えれば要素はそれ以上に伸びます。

よく使われるパターン

1. Footer を常に画面下に置く

min-h-screen（親） + flex flex-col（親） + flex-1（子）

<body className="flex flex-col min-h-screen">
  <header className="h-16">ヘッダー</header>
  <main className="flex-1">メイン（ここが余白を埋める）</main>
  <footer className="h-16">フッター</footer>
</body>

min-h-screenがあると親（body）の高さが最低でも画面サイズになり、header↔︎main↔︎footer間に余白が発生するようになります。flex-1をMainに指定し、その余白をmainで埋めるすることで、Footerが常に下に固定されるようになります。

2. ログインやメッセージ画面で縦横中央に置く

min-h-screen（親） + flex items-center justify-center（親）

<div className="min-h-screen flex items-center justify-center bg-gray-100">
  <div className="bg-white p-8 rounded shadow">フォームやメッセージ</div>
</div>

通常の要素は高さがコンテンツの分しかないので、縦方向に余白がほぼなく、items-centerをしても意味がありません。しかし、min-h-screen があると高さが 100vh になるので、画面の縦方向の中央配置が可能になります。