Crear una sección de rentas destacadas con Tailwind CSS te permite organizar tarjetas visuales con imágenes de fondo, títulos y descripciones cortas usando flexbox en columna. Aquí construimos paso a paso esa sección dentro de un proyecto móvil, reutilizando estilos con la directiva @apply para mantener el código limpio.

¿Cómo se estructura la sección de rentas destacadas en móvil?

La sección parte de un contenedor principal que envuelve un título y un grupo de cards. Cada card funciona como una unidad visual con imagen de fondo, nombre del lugar y una breve descripción.

En el diseño móvil, todo se acomoda en una sola columna usando flex y flex-col. El título principal lleva clases como text-3xl, text-primary, font-semibold y pb-6 para separarlo del contenido siguiente [01:00].

El div que engloba toda la sección recibe px-6, h-full y w-full, dejando espacio lateral y ocupando el ancho disponible.

¿Qué es la directiva @apply en Tailwind? Es una instrucción que te permite agrupar varias clases utilitarias dentro de una clase personalizada en tu archivo CSS, ideal para reutilizar estilos repetidos.

¿Cómo diseñar cada card de renta destacada?

Cada card es un div que contiene dos párrafos: el título y la descripción. Para empezar, defines su tamaño con w-full, h-96 y un bg-red-200 temporal que te ayuda a visualizar el área antes de agregar la imagen real [02:30].

Una vez confirmado el tamaño, sustituyes el fondo por la imagen real con clases como bg-chicago y bg-cover, que ajustan la foto al contenedor sin deformarla.

Para las esquinas redondeadas, comparas rounded-large con rounded-xl. La segunda opción da una curvatura más marcada que combina mejor con el estilo visual de la card.

¿Qué contenido va dentro de cada card?

• Un título con el nombre del lugar, por ejemplo Chicago.
• Una descripción corta del inmueble, como dos habitaciones, un baño y cocina.
• Una imagen de fondo que cubra todo el contenedor.

Estos tres elementos se mantienen consistentes en cada card, lo que justifica extraer los estilos a una clase reutilizable.

¿Cómo reutilizar estilos con la clase card-title?

Como todos los títulos comparten el mismo formato, conviene crear una clase aislada en tu archivo de Tailwind. Dentro de .card-title aplicas con @apply las utilidades text-3xl, px-8, pt-8, pb-1, font-semibold, text-white y text-wide [04:30].

Después de modificar el archivo CSS necesitas correr el build en la terminal para que Tailwind compile los nuevos estilos. Sin ese paso, las clases personalizadas no se aplican.

¿Por qué hay que correr build cada vez que cambias clases personalizadas? Porque Tailwind genera el CSS final analizando tus archivos. Si agregas una clase nueva con @apply, el compilador necesita procesarla antes de que el navegador la reconozca.

La descripción usa estilos más sencillos: text-sm, pl-8, text-black y mr-24. Bajar el tamaño del texto y cambiar el color a negro mejora la legibilidad cuando la imagen de fondo es clara.

¿Cómo organizar varias cards con flexbox?

Para colocar varias cards en columna creas un contenedor que las envuelve. Ese div recibe w-full, h-full, flex, flex-col, space-y-6, items-center y justify-center [06:30].

La propiedad space-y-6 añade separación vertical entre cada card sin necesidad de márgenes individuales. Centrar con items-center y justify-center mantiene la alineación en el eje principal y cruzado.

Para afinar el espaciado general:

1. Reduce el padding lateral de la sección a px-2 cuando las cards necesiten más ancho.
2. Agrega mt-6 al contenedor de rentas destacadas para separarlo de la sección anterior.
3. Ajusta pb-2 en la clase card-title para acercar el título a la descripción.

Estos detalles pequeños son los que diferencian un diseño funcional de uno pulido. Cada vez que ajustes una clase personalizada, recuerda volver a correr el build.

Ahora te toca a ti: agrega todas las cards que necesites para completar tu sección de rentas destacadas. ¿Qué imágenes y descripciones vas a usar en tu proyecto? Cuéntamelo en los comentarios.