Diseño responsive con Tailwind CSS: breakpoints y media queries

Tailwind CSS resuelve el diseño responsive con prefijos de breakpoint. Una clase sin prefijo, como flex-col, se aplica en todos los tamaños, y una clase con prefijo, como md:flex-row, se aplica desde el breakpoint md (48rem, 768 px) en adelante. Eso hace que Tailwind sea mobile first por defecto: escribes el diseño de móvil sin prefijos y añades prefijos para pantallas más grandes. Esta guía trata Tailwind v4, con notas para v3 donde la sintaxis cambia.

Breakpoints por defecto en Tailwind CSS v4

No hay prefijo xs: por defecto. Los estilos sin prefijo son tu diseño más pequeño. Puedes comprobar los valores en la documentación de diseño responsive de Tailwind.

Cómo funcionan los prefijos mobile first

Una cuadrícula de tarjetas típica:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

Léela de izquierda a derecha: una columna en móviles, dos columnas desde 640 px, tres columnas y más separación desde 1024 px. Un error común es escribir sm:grid-cols-1 esperando que afecte a los móviles. sm: significa «640 px en adelante», así que los estilos de móvil van sin prefijo.

Para una cabecera que pasa de columna a fila:

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

Cómo apuntar a un rango o a un ancho máximo

Tailwind v4 incluye variantes max-* y permite combinarlas con los prefijos de min-width:

• max-md:hidden oculta un elemento por debajo de 768 px.
• md:max-lg:flex solo se aplica desde 768 px hasta 1024 px (sin incluirlo).

Para valores puntuales, usa breakpoints arbitrarios: min-[900px]:grid-cols-4 o max-[420px]:text-sm. Úsalos con moderación; si un valor aparece en varios sitios, conviértelo en un breakpoint con nombre.

Cómo añadir o cambiar breakpoints

En v4, los breakpoints son variables de tema definidas en tu CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

Eso crea los prefijos xs: y 3xl:. Para cambiar uno existente, redefínelo (--breakpoint-md: 50rem;). Para quitar uno por defecto, ponlo en initial.

En Tailwind v3, la misma configuración está en tailwind.config.js, dentro de theme.screens (o theme.extend.screens para conservar los valores por defecto).

Usa valores en rem para que los breakpoints respeten a quienes cambian el tamaño de letra por defecto del navegador. Cómo elegir los anchos en sí se explica en breakpoints responsive.

Media queries en tu propio CSS

A veces es más fácil dar estilo a un componente en CSS. En v4 puedes reutilizar ahí los breakpoints de Tailwind:

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant acepta los mismos nombres de variante que usas en las clases, así que @variant lg o @variant dark funcionan igual. Para la sintaxis general de las media queries, consulta la guía de media queries CSS.

Otras variantes responsive que conviene conocer

• portrait: y landscape: para la orientación.
• dark: para el modo oscuro (basado en prefers-color-scheme, salvo que configures una estrategia por clase).
• motion-reduce: y motion-safe: para la preferencia de movimiento reducido.
• print: para estilos de impresión.
• hover: en v4 solo se aplica en dispositivos con hover, así que los efectos hover ya no se quedan «pegados» tras un toque en pantallas táctiles.

Container queries en Tailwind

Los breakpoints responden al viewport. Las container queries responden al ancho de un elemento padre, lo que va bien para componentes reutilizables que aparecen tanto en columnas anchas como estrechas. En v4 vienen integradas:

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

Aquí @md: se refiere al ancho del contenedor (28rem por defecto), no al de la pantalla. En v3 necesitas el plugin oficial @tailwindcss/container-queries.

Cómo probar un diseño de Tailwind en móvil

Tailwind hace muy fácil añadir breakpoints, e igual de fácil olvidarse de revisarlos. Mientras trabajas:

1. Ten abierta una vista a tamaño de móvil junto al editor. Sirve el modo dispositivo de Chrome DevTools o Mobile View Extension, que se activa con un clic, funciona en localhost y mantiene el marco del móvil al pasar de una página a otra.
2. En DevTools, activa Show media queries en la barra de dispositivos para ver los breakpoints de Tailwind como barras y saltar a cada uno.
3. Prueba cada breakpoint en su ancho exacto y 1 px por debajo, por ejemplo 767 px y 768 px.

El método completo está en cómo hacer un test responsive.

Preguntas frecuentes

¿Cuáles son los breakpoints de Tailwind CSS?

Por defecto: sm 40rem (640 px), md 48rem (768 px), lg 64rem (1024 px), xl 80rem (1280 px) y 2xl 96rem (1536 px). Cada uno se aplica desde ese ancho en adelante.

¿Cómo aplico estilos solo en móvil con Tailwind?

Escribe los estilos de móvil sin prefijo y sobrescríbelos en tamaños mayores. Si necesitas un estilo solo por debajo de un tamaño, usa una variante max-* como max-sm: o max-md:.

¿Las media queries de Tailwind son min-width o max-width?

Min-width. Cada prefijo de breakpoint por defecto se aplica desde ese ancho hacia arriba, que es el enfoque mobile first.