15 · Responsive

Breakpoints

Tailwind es mobile-first: una clase sin prefijo aplica siempre, empezando por mobile, y los prefijos sm:,md:, etc., la sobreescriben a partir de cierto ancho de pantalla hacia arriba, nunca hacia abajo.

La escala de breakpoints

Cada prefijo corresponde a un min-width. No hay clase para 'menor a X' — el diseño mobile-first asume que lo de abajo ya está resuelto por la clase base.

sm≥ 640px

md≥ 768px

lg≥ 1024px

xl≥ 1280px

2xl≥ 1536px

sm   → 640px
md   → 768px
lg   → 1024px
xl   → 1280px
2xl  → 1536px

→Estos valores son configurables en el theme, pero la mayoría de proyectos los deja tal cual — son un estándar de facto en el ecosistema Tailwind.

Clase base + override: el patrón central

Se escribe primero el comportamiento de mobile (sin prefijo), y después se agregan prefijos para los anchos donde algo debe cambiar. No hace falta repetir la clase base en cada breakpoint.

Sidebar

Contenido

<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Contenido</div>
</div>

→Error común de quien viene de CSS 'desktop-first': escribir md:flex-col pensando 'en desktop que sea columna' — pero md: aplica desde ese ancho hacia arriba, no hacia abajo.

Ocultar/mostrar según ancho

Combinando hidden con un breakpoint se decide qué versión de un componente se muestra — el caso típico es un menú hamburguesa en mobile y un nav horizontal en desktop.

md:hidden → ☰ Menú
hidden md:flex → nav completo

<button class="md:hidden">☰ Menú</button>
<nav class="hidden md:flex gap-6">
  <a href="/">Inicio</a>
  <a href="/blog">Blog</a>
</nav>

→Nunca dupliques el MISMO contenido con hidden/md:hidden cruzados solo por estética — si es información real (no solo dos looks del mismo dato), puede confundir a lectores de pantalla que sí ven ambos bloques en el DOM.

Tipografía y espaciado responsive

No solo el layout cambia: tamaños de texto, padding y gaps también suelen necesitar ajuste — un h1 que se ve bien en desktop puede ser excesivo en una pantalla de 360px.

Crezco con la pantalla

<h1 class="text-3xl md:text-5xl lg:text-6xl">
  Título que crece con la pantalla
</h1>
<section class="px-4 md:px-8 lg:px-16 py-8 md:py-16">
  ...
</section>

max-{breakpoint}: la excepción 'desktop-first' puntual

A veces se necesita lo opuesto: aplicar algo SOLO hasta cierto ancho. max-md: (en Tailwind 4) o max-w media queries permiten ese caso puntual sin abandonar el enfoque mobile-first general.

max-sm:text-center

<div class="max-md:text-center">
  Centrado solo en mobile/tablet chico
</div>

→Úsalo con moderación — mezclar mobile-first y desktop-first en el mismo componente hace el código más difícil de razonar. Resérvalo para casos puntuales.

Container queries (Tailwind 4): responder al contenedor, no al viewport

@container permite que un componente cambie según el ancho de SU contenedor padre, no del viewport completo — clave cuando el mismo componente vive a veces en una columna angosta y a veces en una ancha (ej: un sidebar vs. el área principal).

@container → @sm: @md: @lg:
responden al padre, no al viewport

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    Cambia según el ancho del contenedor, no de la pantalla
  </div>
</div>

→Es distinto de md:: ese mide el viewport; @md: mide el elemento con @container más cercano — útil para componentes reutilizables (cards, widgets) que no controlan dónde los van a poner.