Introduction

The Tailwind 3.0 version is finally available. The Tailwind 3.0 version is the latest version of Tailwind CSS that addresses some issues found in versions 1 and 2. These include a variety of features that come in handy when creating any project. These features include upgrades to the Tailwind CSS Just-in-Time Mode. You can check our blog post here to learn more about it. They also boost browser performance with less build time, stackable variety, arbitrary value support, and lots more functionality. We are going to look at some of these features and new utilities that were introduced in the Tailwind 3.0 version and how to upgrade from your version to it.

Feature of the new Tailwind 3.0

Tailwind CSS Just-in-Time(JIT) Mode

This feature was introduced last March. This feature allows you to use Tailwind CSS in your project without having to install it. The Tailwind CSS Just-in-Time (JIT) engine brought so many changes, including arbitrary values, and made complex configuration a thing of the past. The new Tailwind 3.0 has made the engine more stable and improved its performance. This, in turn, has improved all Tailwind projects.

Colored box-shadow

This is a new feature in the Tailwind 3.0 version. This allows you to add shadows to your colored buttons or cards while building your project. You can check out the Tailwind documentation to learn more.

Multi-column layout

Tailwind CSS 3.0 has a multi-column layout that is especially useful when building footers. You can now easily add different styles to your footer and make it look unique. You can check the Tailwind docs for more information.

Scroll snap API

Among the new features added are a set of utilities that you can use to make a CSS scroll snap module. This will provide you with the ability to create rich snap scrolling in your HTML project or any project using this technology.

Every color out of the box

Before now, other versions of Tailwind CSS had a restricted color palette. Because of this restriction, developers were often worried when using this technology in their development. However, with the new Tailwind CSS 3.0 version, they can now use all varieties of colors. This Tailwind CSS color palette will be enabled by default when you upgrade to Tailwind 3.0.

Native form control styling

It was a bit tricky to customize the native form controls in the previous versions. This problem has been tackled well in the Tailwind 3.0 version, which includes support for the new accent-color property, as well as a modifier for customizing file input buttons.

Print modifier

The new print features allow you to style how you want your website to appear to people when they print it.

Modern aspect ratio API

Tailwind CSS supports the aspect ratio property in its previous version, but in order to use it, you need to customize it. However, with its growing browser support, the new Tailwind CSS 3.0 now has support for the new native property.

RTL and LTR modifiers

One of the interesting utilities that were added with this new Tailwind 3.0 version is the experimental support for multi-directional layouts. This property allows you to move objects either right or left using the property ‘RTL’ and ‘ltr’ modifiers.

Arbitrary properties

The most exciting part of this Tailwind 3.0 version is the arbitrary properties. You can now use arbitrary CSS, which you can combine with other properties such as hover, sm, and any other properties you wish.

Tailwind CSS CDN

In the new Tailwind 3.0 version, one of the new features that makes it different is the addition of a Tailwind CSS-based CDN. So instead of building some kind of CSS library, they instead made a JavaScript library for Tailwind, which is really exciting. So, for all your HTML documents, you can easily add a CDN for Tailwind CSS and begin to use all Tailwind CSS features immediately.

To start using the CDN of Tailwind version 3.0, visit the Documentation site.

Other interesting utilities that were added include landscape and portrait properties, touch-action, will-change, flex-basis, text-indent, scroll-behavior, fancy underline properties, and more.

How do I update Tailwind to version 3?

Upgrading your Tailwind v2 or v1 to v3.0 is as easy as possible, and you can be ready to start using it in less than 5 minutes. I will walk you through updating any of the versions you have to Tailwind v3.0 here. You can update your Tailwind CSS, PostCSS, and autoprefixer using the following npm command.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.

As simple as that you are ready to use Tailwind CSS version 3.0 on your project.

Tailwind 3.0 now employs PostCSS 8, rather than PostCSS 7. So, you need to upgrade to PostCSS 8 in order to use this. It is recommended you use the Tailwind CLI as opposed to installing Tailwind as a PostCSS plugin.

You can visit the official Tailwind CSS documentation upgrade website to see all the changes that have been made to the Tailwind plugins, using the CDN and migrating to the JIT engine. You can, of course, take a look at their GitHub to see in detail all the changes they have made for this new Tailwind 3.0.

Conclusion

Tailwind CSS version 3.0 is a leap in the framework. It was done with incredible care and with the other users in mind. The migration from the other versions is as smooth as possible. It would be a shame not to try this new Tailwind 3.0 because it comes with a lot of utilities that other versions didn’t have and will make your workflow a lot better.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.