Secciones React responsive con Tailwind CSS v4

Una landing page que luce perfecta en escritorio pero se rompe en el móvil es una landing page que pierde la mitad de su tráfico. El móvil representa más del 60% del tráfico web a nivel global, y Google usa indexación mobile-first. El diseño responsive no es opcional, es el punto de partida. Esta guía explica cómo construir secciones React totalmente responsive con Tailwind CSS v4.

Respuesta rápida: para hacer responsive una sección React con Tailwind CSS v4, parte del móvil y añade encima los prefijos de breakpoint. Usa grid-cols-1 md:grid-cols-2 lg:grid-cols-3 para los grids, flex-col lg:flex-row para los hero de dos columnas y las container queries (@container con @md:) para los componentes que deben adaptarse a su contenedor padre en lugar del viewport.

De un vistazo:

Mobile-first: las clases sin prefijo apuntan al teléfono, las clases con prefijo añaden complejidad para pantallas más anchas.
Breakpoints por defecto (v4): sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.
Container queries: @container permite que un componente se reestilice en un grid, una barra lateral o a ancho completo sin cambiar ninguna prop.
Tipografía fluida: un valor CSS clamp() escala los títulos con suavidad entre breakpoints en vez de saltar.
Ancho mínimo de prueba: 320px es el viewport mínimo viable, y los touch targets se mantienen en al menos 44x44px.

Enfoque mobile-first

Las utilidades responsive de Tailwind son mobile-first por diseño. Las utilidades sin prefijo se aplican a todos los tamaños de pantalla, mientras que los prefijos de breakpoint (sm:, md:, lg:, xl:, 2xl:) se aplican a partir de ese breakpoint y hacia arriba:

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {/* 1 column on mobile, 2 on tablet, 3 on desktop */}
</div>

Esto no es solo una convención, es un modelo mental. Empieza diseñando para la pantalla más pequeña y luego añade complejidad para las pantallas grandes. Ventajas:

Obliga a priorizar el contenido. En una pantalla de 375px no puedes mostrarlo todo. Tienes que decidir qué importa de verdad.
Menos CSS. Añadir estilos para pantallas grandes es aditivo. La alternativa, diseñar desktop-first y sobrescribir para móvil, exige más overrides y media queries con max-width.
Refleja la realidad del usuario. La mayoría de los visitantes que llegan por primera vez ven tu landing page desde un teléfono.

Funciones responsive de Tailwind v4

Tailwind v4 introduce varias mejoras relevantes para el diseño responsive:

Configuración CSS-first

Se acabó depender de tailwind.config.ts para la personalización básica. Define tus breakpoints directamente en CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;   /* 480px */
  --breakpoint-sm: 40rem;   /* 640px */
  --breakpoint-md: 48rem;   /* 768px */
  --breakpoint-lg: 64rem;   /* 1024px */
  --breakpoint-xl: 80rem;   /* 1280px */
  --breakpoint-2xl: 96rem;  /* 1536px */
}

Container queries

Tailwind v4 añade soporte nativo para container queries: estilos responsive basados en el ancho del contenedor padre, no en el del viewport. Es un cambio decisivo para los componentes reutilizables:

export function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <div className="@container">
      <div className="flex flex-col gap-4 @md:flex-row @md:items-center">
        <div className="h-12 w-12 shrink-0 rounded-lg bg-primary" />
        <div>
          <h3 className="text-lg font-semibold">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
    </div>
  );
}

La clase @container establece un contexto de contención. El prefijo @md: aplica los estilos cuando el contenedor (no el viewport) alcanza al menos el ancho md. Así, el mismo componente FeatureCard se adapta tanto si está en un grid de 2 columnas, en uno de 3 o en una barra lateral, sin tocar ni una sola prop.

Patrones de grid responsive

El grid auto-fit

El patrón de grid más flexible usa auto-fit de CSS junto con minmax para crear columnas que se ajustan solas:

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {items.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</div>

Esto genera tantas columnas de 280px de mínimo como quepan en el contenedor. No hacen falta breakpoints: el grid es responsive por naturaleza.

El patrón apilado-a-dividido

Para secciones hero y bloques de contenido que se apilan verticalmente en móvil y se dividen horizontalmente en escritorio:

export function HeroSplit() {
  return (
    <section className="flex min-h-[80vh] flex-col items-center lg:flex-row">
      <div className="flex flex-1 flex-col justify-center px-6 py-16 lg:px-16">
        <h1 className="text-4xl font-bold lg:text-6xl">
          Your headline here
        </h1>
        <p className="mt-4 text-lg text-muted-foreground">
          Supporting text that explains the value proposition.
        </p>
      </div>
      <div className="flex-1">
        <img
          src="/hero-image.png"
          alt="Product screenshot"
          className="h-full w-full object-cover"
        />
      </div>
    </section>
  );
}

En móvil: el contenido se apila en vertical, primero el titular y debajo la imagen. En pantallas lg: una disposición dividida lado a lado.

Tipografía adaptable

El texto que se ve bien en escritorio a menudo resulta demasiado grande o demasiado pequeño en móvil. Usa los prefijos responsive de Tailwind para la escala tipográfica:

<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive headline
</h1>
<p className="text-base text-muted-foreground md:text-lg">
  Body text that scales with the viewport.
</p>

Para una tipografía fluida que escale de forma continua entre breakpoints en lugar de dar saltos, recurre a clamp():

.fluid-heading {
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3.75rem);
}

Esto te da 30px con un viewport de 320px de ancho y 60px con uno de 1440px, escalando de forma lineal entre ambos. Combínalo con Tailwind definiendo una utilidad personalizada o aplicándolo directamente mediante un estilo inline.

Espaciado responsive de las secciones

Las secciones necesitan diferente padding según el tamaño de pantalla. Una sección que se ve aireada en escritorio (py-24) resulta agobiante en móvil. Define un padding responsive coherente:

<section className="px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24">
  {/* section content */}
</section>

O crea un envoltorio de sección reutilizable:

interface SectionProps {
  id?: string;
  className?: string;
  children: React.ReactNode;
}

export function Section({ id, className, children }: SectionProps) {
  return (
    <section
      id={id}
      className={`px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24 ${className ?? ""}`}
    >
      <div className="mx-auto max-w-6xl">{children}</div>
    </section>
  );
}

Así limitas el ancho del contenido en pantallas grandes mientras dejas que las secciones a sangre completa conserven su fondo.

Mostrar y ocultar elementos según el breakpoint

Algunos elementos solo tienen sentido a un tamaño: un botón hamburguesa en el móvil, una barra de navegación completa en escritorio. Tailwind los alterna con hidden y una utilidad de display con prefijo:

{/* Móvil: solo hamburguesa. Escritorio (lg+): nav completa. */}
<button className="lg:hidden" aria-label="Abrir menú">
  <MenuIcon />
</button>
<nav className="hidden lg:flex lg:items-center lg:gap-8">
  <a href="/features">Funciones</a>
  <a href="/pricing">Precios</a>
  <a href="/docs">Docs</a>
</nav>

Para el caso inverso, visible hasta un breakpoint y luego oculto por encima, usa max-lg:hidden. Una advertencia de accesibilidad: un elemento con hidden sale del árbol de accesibilidad, así que los lectores de pantalla lo omiten. Nunca ocultes contenido importante detrás de un solo breakpoint, mantén un equivalente accesible visible en todos los tamaños.

Probar layouts responsive

La barra de dispositivos de Chrome DevTools es lo mínimo. Pero prueba también en dispositivos reales: los touch targets, el renderizado de fuentes y el comportamiento del scroll varían entre los simuladores y los teléfonos de verdad.

Puntos de control clave:

320px de ancho (iPhone SE), el ancho mínimo viable. Si tu layout se rompe aquí, arréglalo.
375px de ancho (iPhone 14), el viewport móvil más común.
768px de ancho (iPad en vertical), el breakpoint de tablet. Aquí deberían funcionar los layouts de dos columnas.
1024px de ancho (iPad en horizontal / portátil pequeño), donde debería entrar en juego el layout completo de escritorio.
Touch targets, mínimo de 44x44px para botones y enlaces. El p-3 de Tailwind en un botón suele bastar para lograrlo.

Secciones responsive, listas para copiar

Construir secciones responsive desde cero en cada proyecto es repetitivo. El catálogo de Incubator tiene más de 844 variantes de sección, todas creadas mobile-first con Tailwind CSS v4. Desde layouts de hero que se apilan con elegancia en el teléfono hasta grids de features que pasan de una columna a varias, cada sección está probada en todos los breakpoints estándar. Explora el catálogo, copia las secciones que necesites y publica una landing page responsive sin escribir CSS responsive desde cero.

Preguntas frecuentes

¿Cuáles son los breakpoints por defecto de Tailwind CSS? Tailwind v4 incluye sm en 640px, md en 768px, lg en 1024px, xl en 1280px y 2xl en 1536px. Cada prefijo se aplica a partir de ese ancho y hacia arriba, porque el framework es mobile-first. Puedes redefinir cualquiera en CSS mediante las variables de tema --breakpoint-*.

¿Debo usar media queries o container queries? Usa los prefijos de breakpoint cuando el layout responde al viewport, y las container queries (@container con @md:) cuando un componente reutilizable debe adaptarse al hueco donde cae. Una tarjeta en una barra lateral y esa misma tarjeta en un grid de tres columnas se estilizan entonces de forma correcta, sin props adicionales.

¿Cómo hago el texto responsive sin que salte en cada breakpoint? Combina los prefijos responsive de Tailwind para el ajuste grueso con un valor CSS clamp() para un escalado suave. clamp(1.875rem, 1.2rem + 2.5vw, 3.75rem) hace crecer un título de 30px a 60px según el ancho del viewport, sin escalón visible.

¿Cuál es el ancho de pantalla más pequeño que debo probar? Diseña hasta 320px, el ancho de un iPhone SE. Un layout que aguanta a 320px aguanta casi en todas partes, y mantener los touch targets en 44x44px o más evita toques erróneos en pantallas pequeñas.

Relacionado en incubator

Componentes de sección hero: layouts de hero mobile-first listos para copiar y pegar.
Secciones de grid de features: grids de features responsive y multicolumna para landing pages.
Componentes de animación al hacer scroll: secciones con animaciones activadas por el scroll construidas sobre Tailwind.
Incubator vs Tailwind UI: comprueba cómo se comparan las dos librerías.
Catálogo completo de secciones: explora las más de 844 variantes de sección responsive.