Tailwind 3.0: ¿qué hay de nuevo?

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:

Performance

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.

Native form styles

It is now possible to manipulate the native styles of a form using tailwind with the accent utility and the file class.

Box shadow

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>

Multi-column layout

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.