My 6 Favorite Tailwind v3 Features

Tailwind v3 is out now and with it comes some nice features. The Tailwind team really pushes forward making Tailwind the best styling experience.

They also made this amazing launch video:

To install Tailwind v3:

bash
npm install -D tailwindcss@latest postcss autoprefixer

There are great feature that didn't make this list like:

There's a lot to talk about, but let's talk about my favorite features.

Tailwind's Just-in-Time features have been in beta for a while now. They gave us the ability to create custom values like w-[220px] and bg-[#c00c00].

Now they are turned on by default!

One of my favorite ways to create a cohesive design is to match the colors. This means you're putting shades of blue everywhere instead of having white text on a blue background.

It's subtle but the result is a less jarring text. It's like using a dark gray on a white background instead of #000 on a white background.

Now we can do the same with Tailwind's colored box shadows. It's subtle but adds a nice effect.

html
<!-- yellow box shadow with a 70% opacity -->
<button class="... shadow-lg shadow-yellow-500/70">
  Whoa Yellow Box Shadow!
</button>

We even have the ability to set the opacity of the box shadow with the /70 at the end of shadow-yellow-500/70.

Something that used to take a lot of work with some pseudo class elements is now done with a few Tailwind text decoration classes. We can have squiggly underlines!

bash
<span class="underline decoration-double decoration-sky-500">amazing</span>

<span class="underline decoration-wavy decoration-indigo-500">already favorite</span>

Tailwind's columns is a really cool feature. We can build out masonry-style grids with just a couple Tailwind classes.

html
<div class="columns-4">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>

Just like the flex and grid classes, I love that you only have to add classes to the parent element to get this to work. This means you can move the children around with minimal changes in your code.

This has always been a pain for me, especially working with videos here on better.dev a lot. I used to manually calculate the video aspect ratio and do h-[1920px] and w-[1080px]. Now we have a video aspect ratio utility class.

bash
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

Instead of adding the entire Tailwind CSS stylesheet using a <link> tag, we can now include a <script> tag that includes the Tailwind Play CDN JavaScript.

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

Just add this script to any project and you can start to work with Tailwind. You are able to use all Tailwind features with this including things like hover: and Just-in-Time arbitrary values like h-[500px].

You wouldn't be able to use those fancy features with the Tailwind CSS stylesheet. You needed an entire build system to use those features. Now we just need the JavaScript file!

Tailwind was already my favorite CSS framework and to see the team being innovative and not resting on their success makes me happy to continue supporting! Love the new features and congrats to the team on the launch!

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)