Tailwind CSS v3.0: Everything you want to know

Nowadays, top-tier websites are built on the foundations of fluid design, responsive layout, and interactive designs. The user-friendly UI makes a wonderful first impression in the eyes of visitors, which is why web developers are putting more emphasis on it. Their primary goal is to design a responsive UI using CSS with the least amount of work. Tailwind can simply do this task for you. Tailwind v3.0 is the most recent member of the Tailwind CSS family. Let’s discuss what Tailwind CSS is and which are the features included in Tailwind 3 and how can you switch from Tailwind v2.0 to Tailwind v3.0.

What is Tailwind CSS ?

Tailwind CSS is a utility-first CSS framework that enables you to easily design customized user experiences with minimum coding. It gives you complete control over your UI interface by allowing you to customize it with the available widgets. The most amazing characteristic of Tailwind is that it does not impose any design limits. Tailwind is gaining popularity in the web development market because it helps users create a more flexible user experience. Using the supplied widgets, you may create a website from the ground up.

Tailwind Lab has been constantly improving the utility classes and features that help the user customize theirs more easily and effectively. It launched Tailwind 3.0’s first alpha version in October 2021. Since then, many new features have been constantly added by the users.

Let’s explore the top features that have been added till now:

• Just in time engine as the default one.
• CDN version will be supported by JIT.
• Color box with shadows.
• Print modifier-To set the look of website when printed.
• Aspect ratio utility-To set the aspect ratio of objects
• Availability of all colors in color palette by default to users.
• File: variant-Style the file upload button.
• Open: variant-To style the elements when in open state.
• Fill and stroke utilities– To specify stroke and fill colors in easy syntax.
• Border-x and y utilities– To style the border on both sides of element.
• Will-change utilities-To hint the browser about the change going to happen.
• Scroll snap utilities-To simplify scroll snap features.

We will some of these features in the later part, but first, let’s have a look at how you can upgrade to version 3.

How you can upgrade to Tailwind CSS 3?

You can easily install the latest Tailwind CSS v3.0, using the npm module by command below:

npm install -D tailwindcss@latest postcss autoprefixer

You can also visit Tailwind Play to try the latest features right in the browser before installing it.

Tailwind developers have tried to a major extent that you can easily switch from version 2 to v3.0. You will also be able to run some projects easily in v2 as well as v3 without making any changes.

Just-in-Time engine as the default engine

Just in Time (JIT) engine was introduced in March 2020, and now has become stable. It will now become the new default engine for empowering Tailwind CSS in version 3.0. The older Ahead of Time (AOT) engine will now be discontinued and cannot be used in v3. It will provide better performance benefits to the user.

The changes that have occurred to the Just in Time engine in version 3 can easily be accommodated by the users who have already used the JIT engine. The JIT enable will provide the features such as arbitrary values, support for pseudo-elements, less code is shipped in development mode, better browser performance, faster builds. From now you will not require to purge unused styles as purge will now be replaced by the content option.

CDN Version will be supported by JIT engine:

CDN version will start to play a vital role since version 3. As of now, the CDN version will be supported by the Just in Time engine. So, you will be enjoying all the cool features of JIT when you are using the CDN version.

CDN version is highly useful in prototyping. It should not be used in production as it is not a good option for the same. The main problem with CDN was that you had to disable a lot of awesome features to keep the file size low. But now everything can be done with just a 93 KB file size. MutationObserver will keep track of the visited classes. You can simply use the CDN version by typing the following script at top of your documents:

<script src=”https:// cdn-tailwindcss.vercel.app/”></script>

A more incredible feature is that now you can easily load first-party plugins. You will just have to add a query parameter in the script tag. In the query parameter field, you will have to specify the first-party plugins you want to load like forms, typography, etc.

Color box with shadows

This utility is included keeping the designers in mind. As shadows around the color box or buttons make it look more attractive. Users for many years have been asking for color box shadows, but the developers were not finding the right way to implement it. But now in Tailwind v3.0, we have been provided with this feature that users can easily use.

You can use these button shadows for our different colored buttons and can also provide different colored shadows for the buttons. To use the color box shadows, you will just have to specify the shadow utility followed by your favorite color. For example, to apply a cyan shadow around a button with the text Hello you can use the below code:

<button class=”bg-cyaan-500 shadow-lg shadow-cyan-500/50 …”>Hello</button>

Print modifier

The print modifier will allow you to specify styles and how they should look when people print them. For example, you can turn all the text blue in color while printing. You can do it using the code below:

<h1 class=”text-indigo-500 print:text-blue”></h1>

You can also hide certain elements while printing such as text or logo, in order to prevent Copywrite issues. For, the example you can hide an image from being printed using the code below:

<img src=”…/dog.png” class=”print:hidden”></img>

You can also block or notify the users if they are trying to print something that you don’t want to. See the code below for the same purpose:

<div class=”hidden print:block”><h1> You are trying to print a protected object </div>

Aspect ratio utility

The modern aspect ratio is a new upgrade in version 3.0 which will allow users to set the aspect ratio that the user wants. It will also provide some by default aspect ratios that the browser understands. By default, three utility classes aspect-auto (for auto aspect ratio), aspect-square (for aspect-ratio:1/1), aspect-video (for aspect-ratio:16/9). For example, to set the video aspect ratio you can set it as below:

<iframe class=” w-full aspect-video…” src=” …/video1.mp4></iframe>

Users have access to all colors in the color palette by default.

In Tailwind CSS 3, all the colors in the color palette will be available by default for the user to use. Before this version, the user had to be very careful about the CSS file size due to the overuse of colors in the color palette. They had to earlier limit the use of color palettes for the same purpose. But now, as all the colors will be available by default, you will not have to worry about the same. Colors like cyan, lime, 10 shades of rose, pink, fuchsia, purple, and more than 50 shades of gray, etc. will be available by default.

Conclusion

Tailwind CSS utility classes are a very helpful tool for users to easily develop responsive and customizable websites using a little CSS code. Tailwind CSS 3 is a major new framework in this family with some great changes. We hope you have gained some knowledge regarding the features.

Which feature from the above list do you think will be the most useful? Tell us in the comments below.