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
Lectura
Sí cuentas con proyectos que están en versiones anteriores de Tailwind, ¡No te preocupes! porque es posible hacer la migración de tus proyectos a las versiones más recientes. 👇
Para migrar de Tailwind 2.0 a 3.0 solo debemos dirigirnos a la documentación, en Upgrade Guide.
Aquí nos encontraremos con el comando que usaremos para actualizar nuestro Tailwind:
npm install -D [email protected] [email protected] [email protected]
Recuerda que este comando te actualizará a la última versión, si quieres una más exacta, puedes cambiar “latest” por el número de versión que desees.
Nos vamos a la carpeta de nuestro proyecto a través de la terminal y lo pegamos. Cuando termine de ejecutarse, nos vamos a nuestro package.json y veremos nuestra versión de Tailwind ya actualizada. 🎉
¡Listo! Ya tienes tu proyecto actualizado en la versión que desees. En la siguiente clase haremos un repaso de lo que creamos y cómo puedes seguir estudiando.
Aportes 0
Preguntas 0
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.