Tailwind 3.0: ¿qué hay de nuevo?

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.