Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Ana María Díaz Solorio

Ana María Díaz Solorio

Tailwind 3.0: ¿qué hay de nuevo?

2/29

Lectura

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 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

**Tailwind v3.4 2024** <https://tailwindcss.com/docs/installation>

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.