Construir una sección de recomendados con scroll horizontal es una técnica muy útil cuando necesitas mostrar múltiples tarjetas (cards) sin ocupar todo el espacio vertical de la pantalla. En esta explicación se recorre paso a paso cómo lograrlo utilizando Flexbox y Tailwind CSS, desde la estructura HTML hasta la personalización individual de cada tarjeta.
¿Cómo se estructura la sección de recomendados en HTML?
El punto de partida es revisar el diseño en Figma [0:04]. La sección se compone de un texto principal y un contenedor que agrupa todas las tarjetas. En la versión de escritorio se muestran varias cards con diseños distintos, mientras que en la versión móvil solo se visualizan dos y la tercera queda oculta gracias al scroll.
Dentro del código, lo primero es ajustar el ID del contenedor a recomendados y modificar el padding para que sea más reducido [1:01]. Luego se agrega una etiqueta <p> con el texto "Recomendados" y se le aplican estas clases de Tailwind:
text-3xl: define un tamaño de fuente grande.font-semibold: aplica un peso tipográfico semi-negrita.text-primary: establece el color principal del proyecto.
¿Cómo funciona el scroll horizontal con Flexbox?
Después del título se crea un <div> que actuará como contenedor de las tarjetas [2:02]. Las clases clave para este contenedor son:
w-auto: el ancho se adapta automáticamente según la cantidad de cards.h-72: fija una altura de 72 unidades para que las tarjetas encajen correctamente.items-center: centra los elementos de forma vertical.mt-6: agrega un margen superior que separa el contenedor del título.overflow-x-auto: habilita el scroll horizontal solo cuando es necesario [2:50].overscroll-x-contain: evita que el scroll se propague al contenedor padre.
Cuando se duplica una tarjeta para probar el comportamiento, ambas se apilan verticalmente. Para corregir esto se agrega la clase flex, que activa Flexbox y coloca los elementos en fila automáticamente [3:21]. También se usa space-x-6 para definir el espacio horizontal entre cada card.
¿Por qué las tarjetas se reducen de tamaño?
Un problema frecuente es que las propiedades de Flexbox del contenedor padre sobrescriben las del componente interno [3:48]. Esto provoca que las tarjetas se encojan. La solución es agregar flex-none dentro de la clase de la tarjeta, lo que impide que Flexbox modifique su tamaño original.
Para que los cambios surtan efecto hay que ejecutar el build de Tailwind desde la terminal con el comando:
bash
npm run tailwind build
Una vez completado el proceso [4:12], las cards mantienen sus dimensiones y el scroll horizontal funciona correctamente.
¿Cómo personalizar cada tarjeta de forma individual?
Cada tarjeta puede tener un diseño distinto. En el ejemplo se modifica la segunda card para mostrar Nueva York en lugar de Norway [4:40]. Los cambios incluyen:
- Imagen de fondo: se actualiza la clase de background consultando el archivo de configuración de Tailwind, donde la imagen se registra como
new_york.
- Color del texto: se cambia de
text-white a text-tertiary, que hace referencia a un tono azul definido en la paleta del proyecto [5:17].
- Fondo del contenedor interno: se reemplaza
bg-secondary por un fondo blanco.
- Textos: se actualizan el título a "New York" y la descripción a "La Gran Manzana" [5:50].
¿Por qué no se usa extracción de componentes aquí?
A diferencia de otros elementos reutilizables, los títulos, subtítulos y contenedores de cada tarjeta no se extraen como componentes porque su contenido y estilos varían de una card a otra [5:08]. Mantenerlos independientes permite mayor flexibilidad al personalizar cada elemento.
Ahora es tu turno de agregar todas las tarjetas que quieras a la sección, probar el scroll horizontal y verificar que todo se comporte de forma correcta. ¿Cuántas cards lograste incluir? Comparte tu experiencia en los comentarios.
