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
Hello, the project of this course was created with version 2.0 of Tailwind, but in December 2021 version 3.0 was released. It is very important that you keep in mind that when you start the project you will do it with this new version, which will not affect the development of the project.
Also at the end of the project I will show you how to migrate your 2.0 projects to Tailwind 3.0 version.
Next we will show you the most important changes of version 3.0:
One of the biggest improvements is the Just in time engine (JIT) compilation mode that replaces the traditional compilation mode to reduce and optimize the file compilation time and weight.
It is now possible to manipulate the native styles of a form using tailwind with the accent utility and the file class.
Now we also have this powerful tool that integrates a series of colors for the shading with which it is possible to modify its opacity.
In this example we can see 3 buttons that have a shading of the same color as the button, but with a lower opacity, creating a beautiful depth effect.
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ..."> Subscribe </button> <button class="bg-blue-500 shadow-lg shadow-blue-500/50 ..."> Subscribe </button> <button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ..."> Subscribe </button> </button>
Columns can be generated natively, now you will be able to create magazine and newspaper style articles or columns. These are really very useful and are also great for footer navigation layouts.
You can check all the new features of this new version in the official documentation 😄.
See you in the next class where we will discuss how Tailwind works.
Contributions 6
Questions 0
Vengo del curso de tailwind css parte 1, espero no me salgan tantos errores en las descargas o en el camino.
Ni modo, tocará estar revisando la documentación nwn
Antes de llegar a este curso aprendí a usar bootstrap pero siento que tailwind tiene mucho más potencial.
Want to see more contributions, questions and answers from the community?