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 になるので、画面の縦方向の中央配置が可能になります。