Construir un layout responsivo requiere más que solo escribir HTML: implica reorganizar la estructura del DOM, aplicar clases condicionales por breakpoint y verificar constantemente que los cambios en escritorio no rompan la versión móvil. A continuación se desglosa paso a paso cómo transformar una sección de tarjetas apiladas en un diseño de columnas múltiples usando Tailwind CSS.
¿Cómo reorganizar el HTML para un layout responsivo?
El punto de partida es una sección de "rentas destacadas" donde todas las tarjetas (Chicago, Los Ángeles, Miami y Bali) viven dentro del mismo div, apiladas en columna. Para lograr el diseño del Figma, es necesario agrupar elementos en contenedores intermedios [01:00].
La técnica consiste en:
- Dejar la tarjeta de Chicago en su propio
div.
- Crear un nuevo
div contenedor que agrupe Los Ángeles, Miami y Bali.
- Dentro de ese contenedor, separar Miami y Bali en otro
div adicional, ya que estas dos tarjetas se comportan en columna entre sí.
Esta reestructuración permite aplicar Flexbox de forma selectiva. Al nuevo contenedor se le asigna la clase lg:flex [03:16], lo que significa que solo en el breakpoint large los elementos se colocan uno al lado del otro. En móvil, el div permanece oculto o sin efecto gracias a la clase hidden por defecto.
¿Qué es un breakpoint y cómo se aplica en Tailwind?
Un breakpoint es un punto de quiebre en el ancho de la pantalla donde el diseño cambia su comportamiento. En Tailwind CSS, el prefijo lg: indica que una clase solo se activa cuando la pantalla alcanza el tamaño large (1024px por defecto). Esto permite escribir reglas como lg:flex, lg:px-6 o lg:text-lg sin afectar la versión móvil [03:16].
¿Por qué usar hidden por defecto en divs auxiliares?
El div contenedor que agrupa las tarjetas secundarias se configura como oculto por defecto (hidden) y visible solo en lg: [04:30]. Esto evita que los estilos de escritorio interfieran con el layout móvil, una práctica fundamental en el enfoque mobile-first que Tailwind promueve.
¿Cómo ajustar tamaños y espaciado con clases utilitarias?
Una vez agrupados los elementos, el siguiente paso es controlar dimensiones y separación. Se utiliza w-full y h-full para que los contenedores ocupen todo el espacio disponible [05:20]. Para la tarjeta de Los Ángeles, se aplica h-auto en lugar de un alto fijo, permitiendo que crezca automáticamente según el contenedor padre.
El espaciado entre tarjetas presenta un detalle importante. Inicialmente se intentó usar la propiedad space-y en el contenedor, pero al tener divs anidados con múltiples hijos, el resultado no fue el esperado [07:10]. La solución fue:
- Eliminar
space-y del contenedor.
- Agregar
mb-8 (margin bottom) directamente a cada tarjeta.
Para aplicar esta clase a varias líneas simultáneamente, se usa el cursor multilínea con Alt + clic [07:40], una técnica de edición que acelera significativamente el trabajo.
¿Cómo agregar padding general a la sección?
Para evitar que el contenido quede pegado a los bordes del navegador, se añade lg:px-6 a toda la sección de rentas destacadas [06:30]. El prefijo px aplica padding horizontal (eje X), y al condicionarlo con lg:, solo afecta la versión de escritorio.
¿Cómo escalar tipografía y ajustar imágenes por breakpoint?
Los títulos de cada tarjeta reciben la clase lg:text-lg [09:10] para que el texto crezca proporcionalmente en pantallas grandes. Nuevamente, el cursor multilínea permite agregar esta clase a múltiples elementos de forma simultánea.
Para la tarjeta de Chicago, se aplica lg:bg-center [10:20] para centrar la imagen de fondo y mejorar la composición visual. Además, el color del texto se ajusta con text-black directamente en el elemento, ya que es el único que requiere un tratamiento diferente al definido con la directiva @apply en los estilos globales.
Con estos ajustes, la sección de rentas destacadas queda completamente responsiva. El siguiente paso será trabajar la navbar para completar la versión web del proyecto.
