tailwindcss-sizing

Tailwind CSS v4.3 のサイズユーティリティに関する完全なリファレンスです。幅（`w-*`、`w-screen`、`w-full`、`w-auto`、`w-min`／`w-max`／`w-fit`）、高さ（`h-*`、`h-screen`、`h-full`、ブラウザー UI を考慮する動的ビューポート高の `h-dvh`）、最小／最大の制約（`min-w-*`／`max-w-*`／`min-h-*`／`max-h-*`）、論理サイズ（v4.2 以降の `inline-*`／`block-*` とその最小／最大形式）、アスペクト比（`aspect-square`、`aspect-video`、任意の比率）を扱います。

全画面コンテナー、幅を制限したコンテンツ、画像／動画のラッパー、サイドバーのレイアウトなど、よく使われる組み合わせパターンも紹介します。

Tailwind CSS のサイズユーティリティ

Tailwind CSS v4.3 のサイズユーティリティについて、幅、高さ、制約、アスペクト比の指定を含む包括的なガイドです。

幅のユーティリティ

基本的な幅のクラス

• w-0 ～ w-96 - 0～384px の固定幅
• w-full - 幅 100%
• w-screen - ビューポート幅の 100%
• w-auto - 自動幅
• w-min - min-content
• w-max - max-content
• w-fit - fit-content

レスポンシブな幅

ブレークポイントごとに異なる幅を適用します。

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

高さのユーティリティ

基本的な高さのクラス

• h-0 ～ h-96 - 0～384px の固定高
• h-full - 高さ 100%
• h-screen - ビューポート高の 100%（100vh）
• h-auto - 自動高
• h-min - min-content
• h-max - max-content
• h-fit - fit-content
• h-dvh - 動的ビューポート高（v3.4 以降）

動的ビューポート高（h-dvh）

h-dvh ユーティリティは、ブラウザー UI 要素を考慮する動的ビューポート高を使用します。

<div class="h-dvh">
  Full dynamic viewport height
</div>

論理サイズ（v4.2 以降）

書字方向に応じたサイズです。inline-*（inline-size）と block-*（block-size）に加え、min-inline-*、max-inline-*、min-block-*、max-block-* があります。これらはスペーシングスケール、分数、full、screen、auto を受け付けます。また、inline-* はコンテナスケール（inline-sm、inline-xl、…）も受け付けます。

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0">
  Sized along the inline/block axes
</div>

最小／最大幅

最小幅

• min-w-0 - min-width: 0
• min-w-full - min-width: 100%
• min-w-min - min-width: min-content
• min-w-max - min-width: max-content
• min-w-fit - min-width: fit-content

最大幅

• max-w-none - max-width: none
• max-w-full - max-width: 100%
• max-w-screen-sm - ブレークポイントに基づく
• max-w-screen-md
• max-w-screen-lg
• max-w-screen-xl
• max-w-screen-2xl

最小／最大高

最小高

• min-h-0 - min-height: 0
• min-h-full - min-height: 100%
• min-h-screen - min-height: 100vh
• min-h-min - min-height: min-content
• min-h-max - min-height: max-content
• min-h-fit - min-height: fit-content

最大高

• max-h-none - max-height: none
• max-h-full - max-height: 100%
• max-h-screen - max-height: 100vh
• max-h-min - max-height: min-content
• max-h-max - max-height: max-content
• max-h-fit - max-height: fit-content

アスペクト比

一般的なアスペクト比

• aspect-auto - auto
• aspect-square - 1 / 1
• aspect-video - 16 / 9

カスタムアスペクト比

<div class="aspect-[3/2]">
  Image container
</div>

よく使われるパターン

全画面コンテナー

<div class="w-screen h-dvh bg-white">
  Full screen content
</div>

幅を制限したコンテナー

<div class="max-w-4xl mx-auto w-full px-4">
  Content with max width and padding
</div>

画像ラッパー

<div class="w-full h-auto">
  <img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>

動画コンテナー

<div class="w-full aspect-video bg-black">
  <video src="video.mp4" class="w-full h-full"></video>
</div>

サイドバーのレイアウト

<div class="flex min-h-screen">
  <aside class="w-64 h-screen overflow-auto">
    Sidebar
  </aside>
  <main class="flex-1">
    Content
  </main>
</div>

参考資料

• 幅のドキュメント
• 高さのドキュメント
• 最小幅のドキュメント
• 最大幅のドキュメント
• 最小高のドキュメント
• 最大高のドキュメント
• アスペクト比のドキュメント