Diseño responsive con Tailwind CSS: trucos útiles

Introducción

A todos nos ha pasado: creas un diseño perfecto en tu portátil y, cuando lo ves en un móvil, es un desastre. Los elementos se amontonan, las imágenes se salen de la pantalla y la experiencia de usuario se viene abajo.

Hacer un diseño responsive no es opcional, es lo mínimo. La buena noticia es que con Tailwind la mentalidad mobile-first ya viene incluida. Hoy te cuento los trucos que me han salvado la vida para que tu trabajo se vea increíble en cualquier pantalla, sin sudar la gota gorda.

El abecé de los prefijos de breakpoint

La base de Tailwind es su sistema de prefijos de breakpoint. Por defecto, todas las clases se aplican desde la pantalla más pequeña, y puedes cambiar el comportamiento en pantallas más grandes:

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

Ejemplo 1: una tarjeta que cambia de disposición

<div class="flex flex-col md:flex-row">
  <div class="md:w-1/2">
    <img src="..." class="w-full">
  </div>
  <div class="md:w-1/2 p-4">
    <h2 class="text-xl md:text-2xl font-bold">Título de la tarjeta</h2>
    <p class="mt-2 text-gray-600">Descripción del producto...</p>
  </div>
</div>

Por defecto, el contenido va en columna, pero a partir de md: pasa a ser una fila con dos columnas iguales.

Truco 1: la cuadrícula mágica con Flexbox y Grid

Para crear diseños que se adaptan, nada supera a flexbox y grid.

Ejemplo 2: una galería de productos responsive

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

En el móvil la galería tiene 1 columna, en pantallas medianas 2 y en pantallas grandes 3.

Truco 2: clases de visibilidad (hidden y block)

A veces quieres que un elemento aparezca solo en ciertos tamaños de pantalla, como en un menú de navegación.

Ejemplo 3: un menú hamburguesa en el móvil

<nav>
  <ul class="hidden md:flex space-x-4">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre mí</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>

  <button class="md:hidden">
  </button>
</nav>

Con hidden y md:flex controlas qué elementos se ven en cada dispositivo.

Conclusión

Dominar el diseño responsive es una habilidad fundamental. Con la mentalidad mobile-first de Tailwind y estos trucos, tu trabajo se verá increíble en cualquier dispositivo. Eso te convierte en un desarrollador que piensa en todos sus usuarios.