Diseño Responsivo

Diseño Responsivo en Tailwind

Tailwind usa un enfoque mobile-first para el diseño responsivo. Las utilidades sin prefijo aplican a todos los tamaños de pantalla, mientras que las utilidades con prefijo aplican en breakpoints específicos y superiores.

Breakpoints por Defecto

Prefijo	Ancho Mínimo	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

Enfoque Mobile-First

<!-- Este texto es:
     - Pequeño (text-sm) en móvil
     - Tamaño base (text-base) en md y superior
     - Grande (text-lg) en lg y superior
-->
<p class="text-sm md:text-base lg:text-lg">
  Texto responsivo
</p>

Ejemplos de Layout Responsivo

<!-- Apilado en móvil, fila en pantallas grandes -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Columnas responsivas en grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<!-- Ancho responsivo -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Contenedor con ancho responsivo
</div>

Espaciado Responsivo

<!-- Padding responsivo -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  Contenido con padding responsivo
</div>

<!-- Márgenes responsivos -->
<div class="mx-4 md:mx-8 lg:mx-auto lg:max-w-4xl">
  Contenido centrado en pantallas grandes
</div>

<!-- Gap responsivo -->
<div class="flex gap-2 md:gap-4 lg:gap-6">
  <div>Item</div>
  <div>Item</div>
</div>

Mostrar y Ocultar Elementos

<!-- Oculto en móvil, visible en md y superior -->
<div class="hidden md:block">
  Contenido solo escritorio
</div>

<!-- Visible en móvil, oculto en md y superior -->
<div class="block md:hidden">
  Contenido solo móvil
</div>

<!-- Diferentes display por breakpoint -->
<div class="hidden sm:flex lg:grid lg:grid-cols-3">
  Display responsivo
</div>

Tipografía Responsiva

<!-- Encabezado responsivo -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  Encabezado responsivo
</h1>

<!-- Altura de línea responsiva -->
<p class="leading-tight md:leading-normal lg:leading-relaxed">
  Texto con altura de línea responsiva
</p>

<!-- Alineación de texto responsiva -->
<p class="text-center md:text-left">
  Centrado en móvil, alineado a la izquierda en escritorio
</p>

Patrón de Navegación Responsiva

<nav class="bg-white shadow">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <span class="font-bold text-xl">Logo</span>
      </div>

      <!-- Navegación de escritorio -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Services</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </div>

      <!-- Botón de menú móvil -->
      <div class="md:hidden flex items-center">
        <button class="p-2 rounded-md text-gray-400 hover:text-gray-500">
          <!-- Icono hamburguesa -->
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Layout de Tarjetas Responsivo

<div class="p-4 md:p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <img class="w-full h-48 object-cover rounded-lg mb-4" src="image.jpg" alt="Card image">
      <h3 class="text-lg md:text-xl font-semibold mb-2">Card Title</h3>
      <p class="text-gray-600 text-sm md:text-base">
        Card description that adjusts based on screen size.
      </p>
    </div>
    <!-- Más tarjetas... -->
  </div>
</div>

Breakpoints Personalizados

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
  },
}