Diseño responsivo con Tailwind

Diseño responsivo en Tailwind

El diseño responsivo en Tailwind funciona con un enfoque mobile-first: primero defines cómo se ve en pantallas pequeñas (sin ningún prefijo), y luego agregas prefijos de breakpoint para modificar el estilo en pantallas más grandes.

Este enfoque es el opuesto a como pensamos en CSS tradicional con max-width en media queries. En Tailwind, usas min-width, aunque no lo ves explícitamente porque los prefijos lo hacen por ti.

Los breakpoints de Tailwind v4

Tailwind v4 incluye estos breakpoints por defecto:

Cómo funcionan

<!-- Este elemento:
     - tiene padding-4 en TODO el rango de pantallas
     - tiene padding-8 desde 1024px hacia arriba (lg) -->
<div class="p-4 lg:p-8">...</div>

<!-- Este elemento:
     - tiene 1 columna en móvil (hasta 639px)
     - tiene 2 columnas de 640px en adelante
     - tiene 3 columnas de 1024px en adelante -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">...</div>

La clave es entender que una clase sin prefijo = aplica en todos los tamaños. Los prefijos solo sobreescriben hacia arriba.

Patrones responsivos más comunes

1. Stack a Grid (el más usado)

<!-- En móvil: columna vertical (flex-col por defecto es flex-col) -->
<!-- En desktop: fila horizontal -->
<div class="flex flex-col lg:flex-row gap-8">
  <aside class="lg:w-72 flex-none">
    <!-- Sidebar: arriba en móvil, a la izquierda en desktop -->
  </aside>
  <main class="flex-1">
    <!-- Contenido principal -->
  </main>
</div>

2. Hero section responsiva

<section
  class="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700
         flex flex-col items-center justify-center text-center
         px-4 py-20"
>
  <h1
    class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl
           font-extrabold text-white leading-tight mb-6"
  >
    Aprende sin límites
  </h1>
  <p
    class="text-lg sm:text-xl text-blue-100
           max-w-xs sm:max-w-md md:max-w-xl lg:max-w-2xl
           leading-relaxed mb-10"
  >
    Plataforma de cursos en línea para desarrolladores que quieren
    dominar las tecnologías más demandadas del mercado.
  </p>
  <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
    <a
      href="/registro"
      class="bg-white text-blue-700 font-bold px-8 py-4 rounded-xl
             hover:bg-blue-50 transition-colors text-center"
    >
      Empezar gratis
    </a>
    <a
      href="/cursos"
      class="border-2 border-white/50 text-white font-bold px-8 py-4
             rounded-xl hover:bg-white/10 transition-colors text-center"
    >
      Ver cursos
    </a>
  </div>
</section>

3. Navegación responsiva con hamburguesa

<header class="bg-white border-b border-gray-100">
  <nav class="flex items-center justify-between px-4 py-4 max-w-7xl mx-auto">

    <!-- Logo siempre visible -->
    <a href="/" class="font-bold text-xl text-gray-900">Logo</a>

    <!-- Links: ocultos en móvil, visibles en desktop -->
    <ul class="hidden lg:flex items-center gap-8">
      <li><a href="/cursos" class="text-gray-600 hover:text-gray-900">Cursos</a></li>
      <li><a href="/blog" class="text-gray-600 hover:text-gray-900">Blog</a></li>
    </ul>

    <!-- CTA: solo en desktop -->
    <a
      href="/registro"
      class="hidden lg:inline-flex bg-blue-600 text-white
             px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors"
    >
      Empezar gratis
    </a>

    <!-- Botón hamburguesa: solo en móvil y tablet -->
    <button
      type="button"
      class="lg:hidden p-2 rounded-lg text-gray-600
             hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-blue-500"
      aria-label="Abrir menú"
    >
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>

  </nav>
</header>

4. Imagen de fondo responsiva

<!-- Imagen diferente según breakpoint (con bg-image y Tailwind arbitrario) -->
<div
  class="bg-[url('/hero-mobile.jpg')] lg:bg-[url('/hero-desktop.jpg')]
         bg-cover bg-center min-h-64 lg:min-h-96"
>
  <!-- Contenido sobre la imagen -->
</div>

Ocultar y mostrar elementos

<!-- Oculto en todos, visible desde lg -->
<div class="hidden lg:block">Solo visible en desktop</div>

<!-- Visible hasta md, oculto desde lg -->
<div class="block lg:hidden">Solo visible en móvil y tablet</div>

<!-- Visible solo en sm (entre 640px y 767px) -->
<div class="hidden sm:block md:hidden">Solo visible en sm</div>

<!-- flex vs block según breakpoint -->
<div class="hidden sm:flex items-center gap-4">
  <!-- Stack vertical en móvil, fila horizontal desde sm -->
</div>

Tipografía responsiva con fluid text

Enfoque con breakpoints

<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold">
  Título principal
</h1>

<p class="text-base sm:text-lg leading-relaxed">
  Párrafo con tamaño adaptativo
</p>

Enfoque con valores arbitrarios (clamp)

Para tipografía verdaderamente fluida sin saltos bruscos:

<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold">
  Título fluido que escala suavemente
</h1>

Spacing responsivo

<!-- Padding que crece con la pantalla -->
<main class="px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 lg:py-16">
  <!-- Contenido -->
</main>

<!-- Gap responsivo en grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
  <!-- Tarjetas -->
</div>

El container en Tailwind

La clase container establece un max-width que corresponde al breakpoint actual y se centra con mx-auto:

<!-- Patrón más común para contenido centrado -->
<div class="container mx-auto px-4">
  <!-- El ancho máximo se adapta automáticamente al breakpoint -->
</div>

Por defecto, container no tiene padding horizontal propio ni se centra solo, necesitas mx-auto y px-4:

<!-- Variante con padding integrado en una clase utilitaria -->
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <h1 class="text-4xl font-bold mb-8">Título de la página</h1>
  <!-- contenido -->
</main>

Breakpoints personalizados con @theme

Si los breakpoints estándar no se ajustan a tu diseño:

@import "tailwindcss";

@theme {
  /* Nuevo breakpoint pequeño */
  --breakpoint-xs: 480px;

  /* Breakpoint enorme para pantallas 4K */
  --breakpoint-3xl: 1920px;

  /* Modificar un breakpoint existente */
  --breakpoint-md: 800px;
}

Ahora puedes usar xs:grid-cols-2, 3xl:grid-cols-8, etc.

Ejemplo completo: página de landing responsiva

<body class="bg-white">

  <!-- Hero -->
  <section class="px-4 py-16 sm:py-24 lg:py-32 text-center">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-4xl sm:text-6xl font-extrabold text-gray-900 mb-6 leading-tight">
        La mejor plataforma<br class="hidden sm:block"> de aprendizaje
      </h1>
      <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10 leading-relaxed">
        Aprende programación con proyectos reales y mentores expertos.
      </p>
      <a
        href="/empezar"
        class="inline-block bg-blue-600 text-white font-bold
               px-10 py-4 rounded-2xl text-lg hover:bg-blue-700 transition-colors"
      >
        Empieza hoy — es gratis
      </a>
    </div>
  </section>

  <!-- Features grid -->
  <section class="bg-gray-50 px-4 py-16 sm:py-24">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
        ¿Por qué elegirnos?
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white p-8 rounded-2xl shadow-sm text-center">
          <div class="text-5xl mb-4">🚀</div>
          <h3 class="text-xl font-bold text-gray-900 mb-2">Aprendizaje rápido</h3>
          <p class="text-gray-500 leading-relaxed">
            Lecciones cortas y enfocadas para máxima retención.
          </p>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-sm text-center">
          <div class="text-5xl mb-4">🎯</div>
          <h3 class="text-xl font-bold text-gray-900 mb-2">Proyectos reales</h3>
          <p class="text-gray-500 leading-relaxed">
            Cada curso incluye proyectos que puedes mostrar en tu portafolio.
          </p>
        </div>
        <div
          class="bg-white p-8 rounded-2xl shadow-sm text-center
                 sm:col-span-2 lg:col-span-1"
        >
          <div class="text-5xl mb-4">👥</div>
          <h3 class="text-xl font-bold text-gray-900 mb-2">Comunidad</h3>
          <p class="text-gray-500 leading-relaxed">
            Únete a miles de estudiantes y mentores activos.
          </p>
        </div>
      </div>
    </div>
  </section>

</body>

Resumen

El diseño responsivo en Tailwind se basa en tres conceptos: mobile-first (el estilo base aplica en móvil), breakpoints (sm:, md:, lg:, xl:, 2xl:) que sobreescriben hacia arriba, y control de visibilidad (hidden/block/flex con prefijos). Estos tres conceptos, combinados con Flexbox y Grid, te permiten construir interfaces completamente responsivas sin escribir una sola media query manualmente.