Sampson Ovuoba for Devwares

Posted on Jan 14, 2022 • Originally published at devwares.com on Jan 10, 2022

Tailwind 3.0 is finally available. here are all the major Changes

#tailwindcss #frontend #tutorial #development

Tailwind 3.0 version is finally available. The Tailwind 3.0 version addresses some issues found on the version 1 and 2 and includes a variety of features that are in handy when creating any project.

These features include upgrade on the Just-in-Time, all the time. It also boosts browser performance with less build time, stackable variety, arbitrary value support and lots of more functionality.

We are going to look at some of these features, 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

Just-in-Time, all the time

This feature was introduced last year March. This feature allows you to use Tailwind CSS in your project without having to install it. Just-in-Time 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

The Tailwind 3.0 has a multi-column layout that is especially useful when building footers. You can now easily add different styles for your footer and get it looking 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 CSS scroll snap module. This will give you the tool to build rich snap scroll on your HTML. Giving you the experience of a life time.

Every color out of the box

Before now, other versions of Tailwind had a restricted color palette. Because the developers worried about the size of these feature. Now with the new Tailwind 3.0 they can use all variety of colors. This color palette will be enabled by default when you upgrade to the 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 included 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 support the aspect ratio property in It’s previous version but in order to use it you need to customize it. However, with its growing browser support, the new Tailwind 3.0 now have 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 these Tailwind 3.0 version is adding 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.

CDN tailwind

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

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 to upgrade to the new Tailwind 3.0 version

To upgrade your Tailwind v2 or v1 to the v3.0 is as easy as possible and you can be ready to start using it in less than 40 minutes. I will walk you through upgrading any of the version you have to the Tailwind v3.0 here.

You can upgrade your Tailwind CSS, PostCSS and autoprefixer using the following npm command

Code


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

The Tailwind 3.0 actually uses a PostCSS 8 no longer the PostCSS 7. So, you need to upgrade to the PostCSS 8 in order to use this. It is recommended you use the Tailwind CLI to 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 on the Tailwind plugins, using the CDN and migrating to JIT engine.

You can of course take a look at their github to see in details all the changes they have made for this Tailwind 3.0.

Conclusion

The 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 smoothly as possible.
It will be a shame not to try this new Tailwind 3.0 because it comes with a lot of utilities other versions didn’t have and will make your work flow a lot easier.

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented
template and UI components. Learn more about contrast.

Resources

You may also find the following resources useful

DEV Community