DEV Community

raivikas
raivikas

Posted on • Originally published at nextjsdev.com on

What's new in Tailwind CSS v3.0? Let's talk about it 🎨.

What's new in Tailwind CSS v3.0? Let's talk about it 🎨.

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 🎨.
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 🎨.
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 🎨.
Colored-shadow button

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

Tailwind Play link

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:

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

<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>

Enter fullscreen mode Exit fullscreen mode

Just visit this link you will get the code to play around and as well as a quick demo: tailwind play

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 🎨.

Here is the link to the code:Tailwind CSS playgound.

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-- 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 🎨.
Html form using Tailwind CSS1

After applying accent class :

What's new in Tailwind CSS v3.0? Let's talk about it 🎨.
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,

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

Enter fullscreen mode Exit fullscreen mode

This is how it's look's like:

What's new in Tailwind CSS v3.0? Let's talk about it 🎨.
Html form with customized colors using Tailwind CSS3

Here is the link to the completed code for the above example: Tailwind CSS Play

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 🎨.
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 🎨.
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 🎨.
Html component Image

After applying the class:

What's new in Tailwind CSS v3.0? Let's talk about it 🎨.
Html component Image2

You can take a quick look to see how it will look: Tailwind CSS play .

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 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.

<script src="https://cdn.tailwindcss.com"></script>

Enter fullscreen mode Exit fullscreen mode

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

<script>
tailwind.config={
 theme:{
    extend:{
      colors:{
           "fancy-blue":"#1E90FF"
            },
         },
      },
    }
</script>

Enter fullscreen mode Exit fullscreen mode

You can also write custom CSS inside the tag.

<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>

Enter fullscreen mode Exit fullscreen mode

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 and if you like to see video tutorials then here is the official release video by TailwindCSS labs.

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

Tailwind CSS v3 Video tutorial by TailwindCSS Labs

Follow me on :

  1. Twitter Link
  2. LinkedIn link
  3. Facebook Link

More articles to read:

Top comments (0)