What's new in Tailwind CSS v3.0? Let's talk about it 🎨.
Tags: tailwindcss
Published: 2022-01-09 03:26:49

---
title: What's new in Tailwind CSS v3.0? Let's talk about it 🎨.
published: true
date: 2021-12-19 07:03:00 UTC
tags: TailwindCSS,
canonical_url: https://nextjsdev.com/whats-new-in-tailwind-css-v3-0-lets-talk-about-it/
---

 ![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/tailwincss-2.PNG)

Hey everyone, I am Vikas Rai and welcome to my new post. In this article, I'll show you some of the exciting new features that come in Tailwind CSS v3.0.

So Tailwind CSS v3.0 just got released on 10 Dec 2021 and has brought a lot of new features and much other helpful stuff, so let's have a look at those features.

Here is the list of those features and we are going to discuss each feature in detail with some examples as well.

# **Just-in-Time, all the time**

The new  Just-in-Time engine has now replaced the classic engine which means that stairway 3 gets a huge performance boost and new features like **stackable variants** , **arbitrary values** , and more.

# **More new colors out of the box**

Color palette enabled by default that's a total of 22 colors including 5 grays which have been renamed to better coexist colors was one of the main contributors to file size ballooning in tailwind 2, but now in tailwind 3 thanks to the new just in time engine, we don't have to worry about that anymore.

22 new colors were added to the color palette:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/colors-2.png)
_Colors pallete by tailwind CSS_

Now provides 5 different shades of gray as well 😍:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/black-shades2.png)
_Gary-Colors Pallete by Tailwind CSS_

# Colored box shadows

Colored box shadows are often used while maki UI design, but the previous Tailwind CSS version doesn't provide them.

But that's the not case anymore, the Tailwind v3.0 brings these new features of Colored box shadows.

Here is an example of a colored-box-shadow style applied on a button:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/colored-shadow.PNG)
_Colored-shadow button_

Here is link to the code if you want to play around with it:

[Tailwind Play link ](https://play.tailwindcss.com/HWP6PQc3Zq)

# Print modifier

The new print variant lets you bring modifications to your designs and get them ready for printing.

Through this feature, you can customize your web page for print, which means you have control over what you want to include or not in the webpage if we want to print it.

# Native aspect ratio

Now there is no use of any plugins to maintain the aspect ratio of various elements in our webpage like video, image, or any other thing.

Now we can use the various types of utility-class like **aspect-video** , **aspect-auto** , **aspect-square** , or use custom values like **aspect-[9/6]** as **JIT** is now inbuilt.

# Comprehensive scroll snap support

This is an amazing feature that allows users to have a list of scrollable elements which snap to center, start, or end of the list.

This feature enhances the UX of a website and can be easily implemented using this simple class-utility **snap-always** or use the **snap-center** utility to snap an element to its center when being scrolled inside a snap container.

Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item.

Here is a little video demo of what it looks like:

<iframe src="https://www.loom.com/embed/34c1b576b0654103a4893d1660d0c038" frameborder="0" width="1280" height="960" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Here is the code as well, so that you can use it:

<!--kg-card-begin: markdown-->
```
<div class="snap-x flex overflow-scroll mt-20">
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src"
  />
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="iamges/src"
  />

  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src"
  />
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src" 

  />
   <img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"src="images/src" />
   <img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5" src="images/src" />
</div>

```
<!--kg-card-end: markdown-->

Just  visit this link you will get the code to play around and  as well as a quick demo: [tailwind play](https://play.tailwindcss.com/XDmqXLCJAJ)

# Scroll behavior

You can now add smooth scrolling in tailwind CSS by adding the **scroll-smooth** class.

This utility is used for controlling the scroll behavior of an element.

If you want to add margin to some places for scroll, it can be done by suffixing margin value to scroll class, like   **scroll-m-4** and you can add using scroll-auto class as well.

# **Multi-column layout**

Tailwind now provides multi-column/newspaper-like layouts!

This layout can be easily implemented by providing the number of columns you need or just setting it to auto for the browser to decide how many columns to use based on size.

To control the gutter gap you can simply provide the class like **gap-x-5** which will provide a gutter gap of 1.25rem. you can change the values as you need.

Here is what it will look like:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/column-layout.PNG)

Here is the link to the code:[Tailwind CSS playgound](https://play.tailwindcss.com/XEBPkRHMzN).

# Accent color & file inputs

Now you can easily customize the native form elements like the **file upload button, checkboxes, radio button** to match the theme color of your brand with the Tailwind CSS v3.0.

You can implement this by just adding one class which is **the accent-<color>-<shade>** to the **form tag** or the **div tag**.

Here is what it looks like:

Before:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/before-applying-accent-class.PNG)
_Html form using Tailwind CSS1_

After applying **accent class** :

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/after-applying-accent-class.PNG)
_Html form with customized colors using Tailwind CSS2_

Now we will see how we can customize the file upload button, to apply styles to the file element just prefix the styles like this **file:bg-violet-500, file:font-semi-bold** that you want to apply.

So, after applying all these classes,

<!--kg-card-begin: markdown-->
```
file:mr-6 file:py-2 file:px-4 file:bg-violet-200 file:font-semibold file:border-none file:rounded-full file:text-violet-700 hover:file:bg-violet-400

```
<!--kg-card-end: markdown-->

This is how it's look's like:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/final-form.PNG)
_Html form with customized colors using Tailwind CSS3_

Here is the link to the completed code for the above example: [Tailwind CSS Play](https://play.tailwindcss.com/q6UQw13qXh)

# Styling open/closed states

This feature is amazing as you can style the open/closed states by just adding class **open** and suffixing the style that you want after the class open, just like this **open:shadow-2xl** or **open:bg-violet-500**.

Here is what it looks like in this example, as you open the details box you will see a box-shadow is applied, and also the background color changes.

Before applying to the class :

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/before-open-class.PNG)
_an html component design using Tailwind CSS_

After applying to the class :

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/After-open-class.PNG)
_an html component design using Tailwind CSS2_

# Fancy underlines

This feature will help to provide more text decorations to text. Tailwind CSS v3.0 brings some fancy text-decoration elements with it.

You can change the colors of this text decoration as well.

Here are those text-decoration classes: **decoration-color-400 ,decoration-solid ,decoration-dashed ,decoration-wavy** and many more.

It will look like something this:

Before applying the class:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/before-fancy-underline.PNG)
_Html component Image_

After applying the class:

![What's new in Tailwind CSS v3.0? Let's talk about it 🎨.](https://nextjsdev.com/content/images/2021/12/after-fancy-underline.PNG)
_Html component Image2_

You can take a quick look to see how it will look: [Tailwind CSS play](https://play.tailwindcss.com/odEmkoAhpL) .

# Play CDN

The new play CDN gives you all the power of Tailwind CSS via a simple script tag in your document heads so that in a HTML page you can add a script tag that points to [**cdn.tailwindcss.com**](https://cdn.tailwindcss.com) and then you have the access to the full power of tailwind CSS.

Just add this script tag in your HTML file and you have the full power of TailwindCSS.

<!--kg-card-begin: markdown-->
```
<script src="https://cdn.tailwindcss.com"></script>

```
<!--kg-card-end: markdown-->

And if you want to change and customize the config file, you can do this in a simple way like this:

<!--kg-card-begin: markdown-->
```
<script>
tailwind.config={
 theme:{
    extend:{
      colors:{
           "fancy-blue":"#1E90FF"
            },
         },
      },
    }
</script>

```
<!--kg-card-end: markdown-->

You can also write custom CSS inside the <style></style> tag.

<!--kg-card-begin: markdown-->
```
<style type="text/tailwindcss">
.btn-custom{
@apply bg-violet-300 w-40 px-4 py-2 rounded-full text-violet-700 font-semibold hover:bg-violet-400;
}
</style>

```
<!--kg-card-end: markdown-->
## Conclusion  

The tailwind CSS v3.0 has more features that I have not covered in this post. I just covered some important features.

This is the best release of 2021 and also the **Next.js v12**.

If you want to more about the release do check out the docs at [TailwindCSS docs](https://tailwindcss.com/docs/installation) and if you like to see video tutorials then here is the official release video by [TailwindCSS labs](https://www.youtube.com/watch?v=mSC6GwizOag&t=1s).

Thank you so much for your patience in reading, if you like this article plz share it with your friend and in your social groups. I will see you in another amazing post, till then stay safe and keep learning and practicing new things.✌️

Some useful links:

[Tailwind CSS Docs](https://tailwindcss.com/docs/installation)

[Tailwind CSS v3 Video tutorial by TailwindCSS Labs](https://www.youtube.com/watch?v=mSC6GwizOag)

Follow me on :

1. [Twitter Link](https://twitter.com/raivikas200)
2. [LinkedIn link](https://www.linkedin.com/in/raivikas200/)
3. [Facebook Link](https://www.facebook.com/raiv200/)

More articles to read:

* [6 Best Vscode Themes that you might not know yet.](https://nextjsdev.com/6-best-vscode-themes-that-you-might-not-know-yet/)
* [Top 5 CSS framework to checkout in 2022.](https://nextjsdev.com/top-5-css-frameworks-to-check-out-in-2022/)