Restricciones mínimas y máximas
Evite que los elementos sean demasiado pequeños o grandes mediante las utilidades min-w-*, max-w-*, min-h-* y max-h-*.
Restricciones mínimas y máximas es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Restricciones mínimas y máximas» es gratis?
Sí — el texto completo de «Restricciones mínimas y máximas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Restricciones mínimas y máximas»?
Evite que los elementos sean demasiado pequeños o grandes mediante las utilidades min-w-*, max-w-*, min-h-* y max-h-*. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Restricciones mínimas y máximas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Utilidades de anchura
- Utilidades de altura
- Restricciones mínimas y máximas
- Relación de aspecto