Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
La creación de una sección visualmente atractiva y funcional para dispositivos móviles es un desafío único, y más cuando estamos hablando de componentes como las rentas destacadas. Utilizando Figma como herramienta, debemos tener en cuenta que en el diseño móvil empleamos un flex en columna.
Div Principal:
div dentro del elemento con el ID rentas destacadas.Estilizar el Texto Principal:
3XL.padding-bottom de tamaño 6.Preparación del Div:
div superior incluya clases: padding en el eje X de 6, height y width completos.Crear una Cartita:
div, crea un nuevo div para la primera cartita con múltiples paréntesis <p> en su interior.width completo, tamaño de 96 para ambas dimensiones.background temporal, como red 200, para entender su comportamiento inicial.Incluir Imagen y Texto:
background-image con una imagen representativa.background cover para ajuste completo.Ajustes de Diseño:
rounded grande (rounded-XL) para bordes curvados atractivos.cartitle para título común en todas las cartitas..cart-title {
@apply text-3xl px-8 py-8 pb-1 font-semibold text-white;
}
text-medium, padding-left de 8, text-white, margin-right de 24.Contenedor Flexbox:
flex y flex-column en el contenedor principal de cartitas.Space entre elementos con valor de 4, centrado con item-center y justify-center.Ajuste de Espaciados:
padding de la clase rentas destacadas.margin para separación adecuada, probando valores (por ejemplo, 6).A escala aprenderás a personalizar visualmente, maximizar el uso de flexbox para contenedores adaptativos y estilizar componentes individuales mediante clases de CSS. Sigue perfeccionando tus habilidades, agrega las cartitas que desees y mantén la estructura clara y visualmente atractiva para los usuarios. ¡Ánimo! La práctica lleva a la maestría.
Aportes 13
Preguntas 3
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
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
Si tienen problemas con las dimensiones de las cards, les recomiendo que cambien el ‘h-full’ del contenedor principal por ‘h-auto’, esto hará que el contenedor se ajuste al tamaño propio de las cards (h-96).
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
}
considero que una mejor practica es insertar las imagenes con etiquetas de img y no como background, incluso esto nos serviria para extender la funcionalidad. ya que podriamos agragar interactividad con javascript que al dar click en la imagen nos de detalles de lo que estamos observando
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:
Estoy aprendiendo cosas interesantes
Los Angeles
4 habitaciones, 3 baños, cocina y piscina privada
Los Angeles\
\4 habitaciones, 3 baños, cocina y piscina privada\
\Architectural marvel by Lake Michigan
Architectural marvel by Lake Michigan
Architectural marvel by Lake Michigan
Architectural marvel by Lake Michigan
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?