Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Básico de Tailwind

Curso Básico de Tailwind

Ana María Díaz Solorio

Ana María Díaz Solorio

Creando la sección de Rentas destacadas

19/29
Recursos

Aportes 4

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para que no tengan que estar haciendo el build cada vez que hacen algún cambio grande, pueden tener en la terminal corriendo este comando:

npx tailwindcss -i ./src/css/index.css -o ./public/css/index.css --watch

De esta forma todo el tiempo verá los cambios, hará el build. Cuando quieran detenerlo solo ejecutan en la terminal ctrl + c

Sección rentas destacadas:

        <div class="px-6 h-full w-full" id="rentas_destacadas">
            <p class="text-3xl text-primary font-semibold pb-6 mt-2">Rentas destacadas</p>
            <div class="w-full h-full flex flex-col space-y-4 items-center justify-center">
                <div class="w-full h-96 bg-chicago bg-cover rounded-xl">
                    <p class="CardTitle">Chicago</p>
                    <p class="text-sm pl-8 text-black mr-24">2 habitaciones, baño y cocina</p>
                </div>
                <div class="w-full h-96 bg-chicago bg-cover rounded-xl">
                    <p class="CardTitle">Chicago</p>
                    <p class="text-sm pl-8 text-black mr-24">2 habitaciones, baño y cocina</p>
                </div>
            </div>
        </div>

Archivo src/css/tailwind.css (importante hacer build al guardar cambios):

@tailwind base;
@tailwind components;
@tailwind utilities;

.Card {
    @apply w-48 h-64 shadow-md rounded-lg flex-none transform transition-all hover:-translate-y-4 hover:shadow-xl
}

.CardTitle {
    @apply text-3xl px-8 pt-8 pb-2 font-semibold text-white
}

Al poner mas de 3 rentas destacadas empezaba a tener un problema, las cards se empezaban a ver mas cortas de altura, la solución fue poner en el container de ellas un h-auto

Usando nesting de PostCSS me quedó así:
CSS en archivo de src/css/tailwind.css

HTML

Y se ve así, le cambié los paddings para que fuera congruente con la sección de arriba: