Construir una sección de recomendados con scroll horizontal en Tailwind CSS requiere combinar Flexbox, propiedades de overflow y clases utilitarias que controlen el comportamiento de cada tarjeta. Aquí verás cómo armar ese componente paso a paso, útil para desarrolladores que diseñan interfaces tipo carrusel sin librerías externas.

¿Cómo se estructura una sección de recomendados en Tailwind?

La base parte de un contenedor principal que agrupa el título y un segundo contenedor que aloja las cards. Esa separación permite manejar el scroll solo donde se necesita, sin afectar al resto del layout.

Dentro de la sección con id="recomendados" se reduce el padding para acercar visualmente los elementos. Luego se agrega una etiqueta <p> con la palabra recomendados, a la que se le aplican tres estilos clave [00:54]:

• text-3xl para definir el tamaño del título.
• font-semibold para darle peso medio sin llegar a bold completo.
• text-primary para alinear el color con la paleta del proyecto.

Después viene el div que contendrá las tarjetas, y ahí es donde ocurre la magia del scroll.

¿Cómo se activa el scroll horizontal con overflow-x?

El scroll horizontal en Tailwind se logra combinando overflow-x-auto con overscroll-x-contain en el contenedor que envuelve las tarjetas. La primera clase muestra la barra solo si el contenido excede el ancho disponible; la segunda evita que el desplazamiento se propague al body.

A ese mismo div se le agregan propiedades estructurales [01:38]:

• w-auto para que el ancho se ajuste a la cantidad de cards.
• h-72 para dar altura suficiente a cada tarjeta.
• items-center para centrar verticalmente.
• mt-6 para separar el contenedor del título superior.

¿Para qué sirve overflow-x-auto en Tailwind? Activa el scroll horizontal solo cuando el contenido sobrepasa el ancho del contenedor. Si todo cabe, la barra no aparece.

¿Por qué usar flex y flex-none juntos en las cards?

Al duplicar una card sin Flexbox, las tarjetas se sobreponen una encima de otra. Aplicando flex al contenedor padre, los elementos se acomodan en fila automáticamente. Para separarlas se usa space-x-4 o space-x-6, según el espacio que quieras entre ellas.

Aquí aparece un detalle importante: las propiedades de Flexbox del contenedor externo entran en conflicto con las del contenedor interno de cada card, lo que reduce el tamaño de las tarjetas. La solución es agregar flex-none a la clase de cada card para que mantenga su tamaño original [03:20].

Después de modificar clases personalizadas, hay que correr el build de Tailwind con el comando npm run tailwind build para que los cambios se reflejen en el CSS final.

¿Qué hace flex-none en Tailwind? Evita que un elemento flex se encoja o crezca, manteniendo su tamaño definido. Es clave cuando hay anidaciones de Flexbox.

¿Cómo personalizar cada card sin extraer componentes?

Cuando las tarjetas comparten estructura pero cambian fondo, texto y colores, no conviene extraer un componente reutilizable. La razón es práctica: cada card tiene contenido único, así que se editan directamente en el HTML.

Por ejemplo, para una tarjeta de Nueva York se modifica el background a bg-new_york, definido previamente en el archivo de configuración de Tailwind. El texto principal pasa de text-white a text-tertiary, que corresponde al tono azul de la paleta. El div interno cambia de bg-secondary a un fondo blanco para crear contraste visual.

El contenido textual también se ajusta por tarjeta: el título dice New York y el subtítulo La Gran Manzana, replicando la referencia tomada del diseño en Figma.

¿Qué diferencia hay entre la versión móvil y la de escritorio?

En móvil, solo se muestran dos tarjetas completas y la tercera queda parcialmente oculta, invitando al usuario a hacer scroll. En escritorio, el contenedor permite ver más cards alineadas horizontalmente. El comportamiento responsivo se sostiene gracias a la combinación de w-auto, flex y overflow-x-auto, sin necesidad de media queries específicas para esta sección.

Esta lógica te permite escalar la sección agregando tantas tarjetas como necesites sin romper el layout. Cada nueva card se inserta dentro del contenedor flex y se personaliza con su propio fondo, texto y enlaces.

¿Ya probaste tu propio carrusel con scroll horizontal? Cuéntame en los comentarios qué tarjetas agregaste y si encontraste algún detalle al ajustar el espaciado.