Acá comparto la nueva paleta de colores en un archivo de figma por si alguien le interesa
https://www.figma.com/file/HuUdkljAkThqXNDCWeJZcO/Tailwind-CSS-Colors-(v3)?node-id=0%3A1
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
Hola, el proyecto de este curso fue creado con la versión 2.0 de Tailwind, pero en diciembre de 2021 salió la versión 3.0. Es muy importante que tengas en cuenta que cuando comiences el proyecto lo harás con esta nueva versión, lo cual no afectara para el desarrollo del proyecto.
De igual manera al finalizar el proyecto te mostraré como realizar una migración de tus proyectos 2.0 a la versión 3.0 de Tailwind.
A continuación te mostramos los cambios más importantes de la versión 3.0:
Rendimiento
Una de las mejoras más grandes es el modo de compilación Just in time engine (JIT) que llega a reemplazar el modo de compilación tradicional para reducir y optimizar el tiempo de compilación del archivo así como su peso.
Estilos nativos de formularios
Ahora es posible manipular los estilos nativos de un formulario haciendo uso de tailwind con la utilidad accent y la clase file.
Box shadow
Ahora también contamos con esta poderosa herramienta que integra una serie de colores para el sombreado con la cual es posible modificar su opacidad.
En este ejemplo podemos ver 3 botones que tienen un sombreado del mismo color que el botón, pero con una opacidad menor, creando un efecto de profundidad hermoso.
<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>
Multi-column layout
Se pueden generar columnas nativamente, ahora podrás crear artículos o columnas al estilo de revistas y periódicos. Estos son realmente muy útiles y también son excelentes para diseños de navegación al pie de página.
Puedes consultar todas las novedades de esta nueva versión en la documentación oficial 😄
Te veo en la siguiente clase donde vamos a discutir cómo funciona Tailwind.
Aportes 5
Preguntas 0
Ordenar por:
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.