Trucos responsive tailwind

Comprender las Clases de Breakpoints

Tailwind proporciona clases para diferentes tamaños de pantalla, que puedes usar para aplicar estilos condicionalmente:

• sm: (640px)
• md: (768px)
• lg: (1024px)
• xl: (1280px)
• 2xl: (1536px)

<div class="text-base md:text-lg lg:text-xl xl:text-2xl">
  Texto responsivo
</div>

En este caso el texto según la medida de la pantalla cambia de tamaño esto también lo podemos aplicar con el padding, margin para variar.

Breakpoints Personalizados

Puedes personalizar los breakpoints de Tailwind en el archivo de configuración tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',
        '3xl': '1600px',
      }
    }
  }
}

Margin y Padding Dinámicos

<div class="mt-4 md:mt-8 lg:mt-12">
  <p class="mb-4 md:mb-8 lg:mb-12">
    Márgenes y padding dinámicos
  </p>
</div>

Width y Height

<div class="w-full h-64 md:w-1/2 lg:w-1/3">
  Ancho y alto responsive
</div>

Ajuste de Texto

<p class="leading-normal md:leading-relaxed lg:leading-loose">
  Ajuste de la altura de línea según el tamaño de pantalla
</p>

Uso de Flexbox

Flexbox es excelente para crear layouts flexibles y responsivos. Tailwind tiene muchas clases útiles para flexbox:

<div class="flex flex-wrap">
  <div class="flex-1 min-w-0 bg-blue-200 p-4">Elemento 1</div>
  <div class="flex-1 min-w-0 bg-green-200 p-4">Elemento 2</div>
  <div class="flex-1 min-w-0 bg-yellow-200 p-4">Elemento 3</div>
</div>

• flex-1: Hace que los elementos hijos ocupen la misma cantidad de espacio.
• min-w-0: Establece un ancho mínimo de 0 para evitar que los elementos crezcan más allá del contenedor.

Justificación y Alineación

<div class="flex flex-col md:flex-row">
  <div class="flex-1">Columna 1</div>
  <div class="flex-1">Columna 2</div>
</div>

La clase flex se aplica a un contenedor para convertirlo en un contenedor flex.

• flex-row: Dirección predeterminada (horizontal).
• flex-col: Dirección vertical.

<div class="flex flex-wrap">
  <div class="bg-blue-200 p-4 m-2 w-1/3">Elemento 1</div>
  <div class="bg-green-200 p-4 m-2 w-1/3">Elemento 2</div>
  <div class="bg-yellow-200 p-4 m-2 w-1/3">Elemento 3</div>
  <div class="bg-red-200 p-4 m-2 w-1/3">Elemento 4</div>
</div>

• flex-wrap: Permite que los elementos hijos se envuelvan si no caben en una sola línea.

<div class="flex flex-nowrap">
  <div class="bg-blue-200 p-4 m-2 w-1/3">Elemento 1</div>
  <div class="bg-green-200 p-4 m-2 w-1/3">Elemento 2</div>
  <div class="bg-yellow-200 p-4 m-2 w-1/3">Elemento 3</div>
  <div class="bg-red-200 p-4 m-2 w-1/3">Elemento 4</div>
</div>

• flex-nowrap: No permite que los elementos hijos se envuelvan.

Justificación en el Eje Principal (justify-content)

<div class="flex justify-start">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• justify-start: Alinea los elementos al inicio del contenedor.

<div class="flex justify-center">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• justify-center: Alinea los elementos al centro del contenedor.

<div class="flex justify-end">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

<div class="flex justify-between">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• justify-between: Distribuye los elementos con espacio igual entre ellos.

<div class="flex justify-around">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

<div class="flex justify-evenly">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• justify-evenly: Distribuye los elementos con espacio igual entre ellos y el borde del contenedor.

<div class="flex items-start h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• items-start: Alinea los elementos al inicio del eje transversal.

<div class="flex items-center h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• items-center: Alinea los elementos al centro del eje transversal.

<div class="flex items-end h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• items-end: Alinea los elementos al final del eje transversal.

<div class="flex items-baseline h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4 text-lg">Elemento 2</div>
  <div class="bg-yellow-200 p-4 text-sm">Elemento 3</div>
</div>

• items-baseline: Alinea los elementos según su línea base.

<div class="flex items-stretch h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• items-stretch: Estira los elementos para llenar el contenedor (comportamiento predeterminado).

Orden de los Elementos (order)

<div class="flex">
  <div class="bg-blue-200 p-4 order-2">Elemento 1</div>
  <div class="bg-green-200 p-4 order-1">Elemento 2</div>
  <div class="bg-yellow-200 p-4 order-3">Elemento 3</div>
</div>

Puedes cambiar el orden de los elementos usando la propiedad order.

Flex Crecimiento, Contracción y Base

<div class="flex">
  <div class="bg-blue-200 p-4 flex-grow">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• flex-grow: Permite que un elemento crezca para llenar el espacio disponible.

<div class="flex">
  <div class="bg-blue-200 p-4 flex-shrink">Elemento 1</div>
  <div class="bg-green-200 p-4 flex-shrink-0">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• flex-shrink: Permite que un elemento se contraiga si es necesario.

<div class="flex">
  <div class="bg-blue-200 p-4 flex-basis-1/2">Elemento 1</div>
  <div class="bg-green-200 p-4 flex-basis-1/4">Elemento 2</div>
  <div class="bg-yellow-200 p-4 flex-basis-1/4">Elemento 3</div>
</div>

• flex-basis: Establece la base del tamaño de un elemento antes de que crezca o se contraiga.

Uso de Grid

Tailwind también facilita el uso de CSS Grid para crear layouts complejos:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Para empezar a usar CSS Grid, necesitas aplicar la clase grid al contenedor.

Número de Columnas (grid-cols)

<div class="grid grid-cols-3">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
  <div class="bg-red-200 p-4">Elemento 4</div>
</div>

Número de Filas (grid-rows)

<div class="grid grid-rows-3">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
  <div class="bg-red-200 p-4">Elemento 4</div>
</div>

Espaciado entre Elementos (gap)

El gap se usa para establecer el espacio entre filas y columnas.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

Espaciado Horizontal y Vertical (gap-x y gap-y)

Puedes definir el gap horizontal y vertical por separado.

<div class="grid grid-cols-3 gap-x-4 gap-y-2">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

Alineación de Contenido (justify-items y align-items)

Puedes alinear el contenido horizontal y verticalmente dentro de las celdas.

• justify-items: Alinea horizontalmente (start, center, end, stretch).

<div class="grid grid-cols-3 justify-items-center">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

<div class="grid grid-cols-3 align-items-center h-32">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• align-items: Alinea verticalmente (start, center, end, stretch).

Alineación de Contenedor (justify-content y align-content)

<div class="grid grid-cols-3 justify-content-center">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• justify-content: Alinea horizontalmente (start, center, end, space-between, space-around).

<div class="grid grid-cols-3 justify-content-center">
  <div class="bg-blue-200 p-4">Elemento 1</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• align-content: Alinea verticalmente (start, center, end, space-between, space-around).

Span de Columnas y Filas (col-span y row-span)

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4 col-span-2">Elemento 1 (span 2 columnas)</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
</div>

• col-span: Abarca varias columnas.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4 row-span-2">Elemento 1 (span 2 filas)</div>
  <div class="bg-green-200 p-4">Elemento 2</div>
  <div class="bg-yellow-200 p-4">Elemento 3</div>
  <div class="bg-red-200 p-4">Elemento 4</div>
</div>

• row-span: Abarca varias filas.

Manera de simplificar la creacion de varios grids, columnas y filas

<div class="grid grid-areas-['header header' 'sidebar main' 'footer footer'] grid-cols-[1fr 3fr] grid-rows-[auto 1fr auto] gap-4">
  <div class="grid-area-header bg-blue-200">Header</div>
  <div class="grid-area-sidebar bg-green-200">Sidebar</div>
  <div class="grid-area-main bg-yellow-200">Main Content</div>
  <div class="grid-area-footer bg-red-200">Footer</div>
</div>

• grid-areas: Define las áreas de la cuadrícula.
• grid-cols: Define las columnas con fracciones (1fr, 3fr).
• grid-rows: Define las filas con tamaños automáticos y fracciones (auto, 1fr).

Manejo de Imágenes y Medios

<img src="image.jpg" class="w-full h-48 object-cover object-center">

Espaciados Responsivos y Utilidades

<div class="p-4 md:p-8 lg:p-12 border border-gray-300 shadow-lg rounded-lg">
  Contenido con bordes y sombras
</div>

Ejemplo de página básica responsive

Ejemplo de una página básica responsive con su navbar, cuerpo y footer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página Responsive con Tailwind CSS</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  <!-- Navbar -->
  <nav class="bg-blue-500 p-4 text-white">
    <div class="container mx-auto flex justify-between items-center">
      <div class="text-xl font-bold">MiSitio</div>
      <div class="space-x-4">
        <a href="#home" class="hover:underline">Home</a>
        <a href="#about" class="hover:underline">About</a>
        <a href="#services" class="hover:underline">Services</a>
        <a href="#contact" class="hover:underline">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Home Section -->
  <section id="home" class="py-16 bg-white dark:bg-gray-800">
    <div class="container mx-auto text-center">
      <h1 class="text-4xl md:text-6xl font-bold">Bienvenido a MiSitio</h1>
      <p class="mt-4 text-lg md:text-xl">Tu lugar para encontrar los mejores servicios</p>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="py-16 bg-gray-200 dark:bg-gray-700">
    <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <h2 class="text-3xl font-bold">Sobre Nosotros</h2>
        <p class="mt-4 text-lg">Somos una empresa dedicada a proporcionar servicios de alta calidad a nuestros clientes.</p>
      </div>
      <div>
        <img src="https://via.placeholder.com/600" alt="About Us" class="w-full h-auto rounded-lg shadow-lg">
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="py-16 bg-white dark:bg-gray-800">
    <div class="container mx-auto">
      <h2 class="text-3xl font-bold text-center">Nuestros Servicios</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
        <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-lg shadow-lg text-center">
          <h3 class="text-2xl font-bold">Servicio 1</h3>
          <p class="mt-4">Descripción del servicio 1</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-lg shadow-lg text-center">
          <h3 class="text-2xl font-bold">Servicio 2</h3>
          <p class="mt-4">Descripción del servicio 2</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-lg shadow-lg text-center">
          <h3 class="text-2xl font-bold">Servicio 3</h3>
          <p class="mt-4">Descripción del servicio 3</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="py-16 bg-gray-200 dark:bg-gray-700">
    <div class="container mx-auto text-center">
      <h2 class="text-3xl font-bold">Contáctanos</h2>
      <p class="mt-4 text-lg">Puedes contactarnos a través de las siguientes formas</p>
      <div class="mt-8 space-y-4">
        <div>
          <strong>Email:</strong> contacto@misitio.com
        </div>
        <div>
          <strong>Teléfono:</strong> +123 456 7890
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-blue-500 p-4 text-white text-center">
    <p>&copy; 2024 MiSitio. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Explicación

1. Navbar:
   • Usamos flex para organizar los elementos dentro del navbar.
   • Las clases de Tailwind proporcionan un diseño limpio y responsive.
2. Home Section:
   • Un contenedor centrado con text-center y márgenes verticales (py-16).
   • Usamos clases de texto responsive como text-4xl y md:text-6xl.
3. About Section:
   • Uso de grid con una disposición de una columna en dispositivos móviles (grid-cols-1) y dos columnas en dispositivos medianos (md:grid-cols-2).
   • Imágenes con clases responsive para adaptarse al tamaño del contenedor (w-full, h-auto).
4. Services Section:
   • Una disposición de cuadrícula para los servicios con tres columnas en dispositivos medianos (md:grid-cols-3).
   • Cada servicio está contenido en una tarjeta con diseño consistente usando bg-gray-200, p-6, rounded-lg, y shadow-lg.
5. Contact Section:
   • Un diseño centrado similar a la sección de inicio con text-center.
   • Información de contacto en un formato fácil de leer.
6. Footer:
   • Un pie de página simple con un fondo azul y texto centrado.