最小・最大サイズの制約
min-w-*、max-w-*、min-h-*、max-h-*の各ユーティリティを使って、要素が小さくなりすぎたり大きくなりすぎたりするのを防ぎます。
「最小・最大サイズの制約」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Why Size Constraints Matter
Fixed widths and heights break at extreme viewport sizes — too narrow and content squishes, too wide and text becomes unreadable. CSS min/max properties solve this by setting guardrails: an element can be flexible within a range but never goes beyond the set bounds. Tailwind's min-w-*, max-w-*, min-h-*, and max-h-* utilities put these guardrails in place with simple class names.
<!-- Button that never shrinks below 120px or grows past 300px -->
<button class="min-w-[120px] max-w-xs bg-blue-500 text-white px-4 py-2 rounded">
Constrained Button
</button>min-w-* Utilities
min-w-* prevents an element from becoming narrower than the specified value. Tailwind provides min-w-0 (very common in flex contexts), min-w-full, min-w-min, min-w-max, and min-w-fit. The most important is min-w-0, which allows flex or grid children to shrink below their natural content width — a fix for many layout overflow bugs.
<!-- Without min-w-0, long text overflows the flex container -->
<div class="flex gap-3 p-4 border rounded">
<div class="w-10 h-10 shrink-0 bg-indigo-400 rounded-full"></div>
<!-- min-w-0 allows text truncation inside flex child -->
<div class="min-w-0">
<p class="font-semibold truncate">Very Long Username That Would Overflow Without min-w-0</p>
<p class="text-sm text-gray-500">Online</p>
</div>
</div>max-w-* for Container Widths
max-w-* caps how wide an element can grow. Tailwind provides named sizes from max-w-xs (320px) through max-w-7xl (1280px), plus max-w-full, max-w-prose, and max-w-screen-*. The combination of max-w-7xl mx-auto is the standard pattern for centering page content while preventing it from stretching too wide on large monitors.
<!-- Standard page container -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold py-8">Page Title</h1>
<p class="text-gray-600">
Content constrained to 1280px max, centered on wide screens.
</p>
</div>max-w-prose for Reading Comfort
max-w-prose sets max-width: 65ch — approximately 65 characters per line, the research-backed optimum for reading comfort. Apply it to article text, blog posts, and any long-form content to prevent lines from stretching too wide on large screens. The ch unit scales with the font size, so the line length stays comfortable even if you change the font.
<!-- Article with comfortable reading width -->
<article class="max-w-prose mx-auto px-4 py-8">
<h1 class="text-2xl font-bold mb-4">How Tailwind Works</h1>
<p class="text-gray-700 leading-relaxed mb-4">
Tailwind CSS takes a utility-first approach to styling. Instead of
writing custom CSS, you compose designs by combining small, single-purpose
classes directly in your HTML. This keeps your CSS bundle small and
your component styles co-located with your markup.
</p>
</article>Named max-w Sizes Reference
Tailwind's named max-w-* sizes follow a logical progression matching common UI component widths. max-w-xs (320px) suits tooltips and mobile cards. max-w-md (448px) is ideal for modals and forms. max-w-2xl (672px) fits article content. max-w-4xl (896px) suits dashboard content areas. Knowing these makes it easy to pick the right constraint without measuring pixels.
<!-- Comparing different max-w sizes -->
<div class="space-y-3 p-4">
<div class="max-w-xs bg-red-100 p-2 rounded">max-w-xs (320px)</div>
<div class="max-w-sm bg-orange-100 p-2 rounded">max-w-sm (384px)</div>
<div class="max-w-md bg-yellow-100 p-2 rounded">max-w-md (448px)</div>
<div class="max-w-lg bg-green-100 p-2 rounded">max-w-lg (512px)</div>
<div class="max-w-xl bg-blue-100 p-2 rounded">max-w-xl (576px)</div>
<div class="max-w-2xl bg-purple-100 p-2 rounded">max-w-2xl (672px)</div>
</div>min-h-* for Tall Enough Elements
min-h-* ensures an element is at least as tall as specified, even when content is sparse. min-h-screen (100vh) is the standard for page wrappers, preventing a short page from leaving a white gap below the footer. min-h-0 allows flex children to shrink below their intrinsic size, useful in overflow-containing flex layouts.
<!-- Sticky footer pattern using min-h-screen -->
<div class="flex flex-col min-h-screen">
<header class="bg-gray-900 text-white p-4">Header</header>
<!-- flex-1 grows to fill remaining space -->
<main class="flex-1 p-6">
<p>Short page content</p>
</main>
<!-- Footer always stays at the bottom -->
<footer class="bg-gray-200 p-4 text-center">
Footer always at bottom
</footer>
</div>max-h-* for Capping Growth
max-h-* caps how tall an element can grow. This is essential for scrollable dropdowns and panels that should not take over the screen. The pattern max-h-60 overflow-y-auto is the standard for dropdown menus — they show up to 15rem of options with a scroll bar if more exist. Without max-h-*, a dropdown with 200 items would cover the entire page.
<!-- Dropdown list capped in height with scroll -->
<div class="relative w-64">
<button class="w-full bg-white border rounded p-2 text-left">Select a country ▾</button>
<ul class="absolute w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto mt-1 z-10">
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Afghanistan</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Albania</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Algeria</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Argentina</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Australia</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Austria</li>
<li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Belgium</li>
</ul>
</div>Combining Min and Max Constraints
The most flexible sizing approach is combining min-w-*, max-w-*, and a base width. The CSS rule of thumb is: the element wants to be the base width, but the min-w prevents it from going smaller and the max-w prevents it from going larger. This creates a fluid range that adapts to content and viewport simultaneously.
<!-- Button that stays between 150px and 300px wide -->
<div class="flex gap-4 flex-wrap">
<button class="min-w-[150px] max-w-[300px] w-full sm:w-auto bg-purple-500 text-white px-4 py-2 rounded">
Adaptive Button
</button>
<!-- Card that is at least 200px wide but no more than 400px -->
<div class="min-w-[200px] max-w-[400px] flex-1 bg-purple-100 p-4 rounded">
Fluid card between 200-400px
</div>
</div>max-w-screen-* for Breakpoint Sizes
Tailwind's max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, and max-w-screen-2xl set max-widths that exactly match the responsive breakpoint values. This lets you create containers that cap at the current breakpoint, useful for section backgrounds that stretch to full width while the inner content stays contained to the breakpoint boundary.
<!-- Full-width section background, constrained inner content -->
<section class="bg-blue-600 w-full py-16">
<div class="max-w-screen-lg mx-auto px-4 text-white">
<h2 class="text-3xl font-bold">Capped at lg breakpoint</h2>
<p class="mt-2 opacity-80">Inner content constrained to 1024px maximum width.</p>
</div>
</section>Responsive Constraints
Constraints can be different at different breakpoints. A common pattern is max-w-full sm:max-w-md lg:max-w-lg for a modal dialog: it fills the screen on mobile, caps at 448px on small tablets, and 512px on large screens. This prevents the modal from stretching too wide on desktop while ensuring it is usable on mobile without horizontal scrolling.
<!-- Responsive modal width constraints -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
<div class="w-full max-w-full sm:max-w-md lg:max-w-lg bg-white rounded-xl p-6 shadow-2xl">
<h2 class="text-xl font-bold mb-4">Modal Title</h2>
<p class="text-gray-600">Modal content here. Width adapts from full-screen on mobile to constrained on desktop.</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Confirm</button>
</div>
</div>Practical Image Constraints
Responsive images especially benefit from min/max constraints. Setting max-w-full on images prevents them from overflowing their container on small screens, while min-w-0 allows them to shrink below their natural size in flex contexts. The object-cover class combined with height constraints creates the popular thumbnail effect used in card components.
<!-- Responsive image that stays in bounds -->
<div class="max-w-sm">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400"
alt="Coding"
class="max-w-full h-48 object-cover rounded-t-lg w-full"
/>
<div class="p-4 bg-white rounded-b-lg shadow">
<h3 class="font-semibold">Image Card</h3>
<p class="text-sm text-gray-500 mt-1">Image fills width, capped at max-w-sm container.</p>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: max-w-prose limits text to a comfortable 65-character reading width, min-h-screen with flex-col and flex-1 creates the sticky footer pattern, and max-h-* with overflow-y-auto is the standard approach for scrollable dropdowns and panels. Next up we explore aspect ratio utilities for maintaining proportional dimensions.
よくある質問
「最小・最大サイズの制約」レッスンは無料ですか？
はい。「最小・最大サイズの制約」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「最小・最大サイズの制約」で何を学びますか？
min-w-*、max-w-*、min-h-*、max-h-*の各ユーティリティを使って、要素が小さくなりすぎたり大きくなりすぎたりするのを防ぎます。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「最小・最大サイズの制約」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 幅のユーティリティ
- 高さのユーティリティ
- 最小・最大サイズの制約
- アスペクト比