Contraintes minimales et maximales
Empêchez les éléments de devenir trop petits ou trop grands avec les utilitaires min-w-*, max-w-*, min-h-* et max-h-*.
Contraintes minimales et maximales est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Contraintes minimales et maximales » est-elle gratuite ?
Oui — le texte complet de « Contraintes minimales et maximales » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Contraintes minimales et maximales » ?
Empêchez les éléments de devenir trop petits ou trop grands avec les utilitaires min-w-*, max-w-*, min-h-* et max-h-*. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Contraintes minimales et maximales » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Utilitaires de largeur
- Utilitaires de hauteur
- Contraintes minimales et maximales
- 比例 des dimensions