Tailwind 2.0 is Live!

Featured on Hashnode

If you've been following along on Twitter, Tailwind was hinting that something big was coming. Today we get the reveal.

Tailwind 2.0! 🥳

The first major release to the utility-first framework brings with it some incredible features, and while you should head to the newly redesigned tailwind website to read all of the juicy details, if you want a list of my favorite additions to the framework, keep reading...

A New Color Palette

Tailwind 2.0 introduces a brand-new color palette packed with 220 colors, including 5 different shades of gray. It's beautiful!

Screen Shot 2020-11-18 at 3.16.53 PM.png

Dark Mode

That's right. Tailwind now officially supports dark mode. And it looks extremely easy to set up!

UPDATE: I've just published an article showing you how to use the new features to get dark mode set up in your own project! Check it out HERE!

Screen Shot 2020-11-18 at 3.17.58 PM.png

Extra Wide 2XL Breakpoint

This is a big one for me because I have a 49" ultra-wide monitor. This new breakpoint is designed for 1536px and larger.

Screen Shot 2020-11-18 at 3.21.20 PM.png

Extended Spacing

With Tailwind 2.0, the default spacing scale has been extended to include micro values as well as new values for use-cases where larger values are needed!

Screen Shot 2020-11-18 at 3.25.03 PM.png

Group-Hover & Focus-Within By Default

The group-hover and focus-within classes are now part of the default functionality out-of-the-box with Tailwind 2.0!

Screen Shot 2020-11-18 at 3.27.47 PM.png

Conclusion

There's a lot more that Tailwind 2.0 offers, so make sure to head over to the documentation site to learn more!

I can't wait to start using Tailwind 2.0!

What do you think? Leave your thoughts in the comments below!

Thanks for reading! If you liked this article and want more content like this, read some of my other articles , subscribe to my newsletter and make sure to follow me on Twitter!

Interested in reading more such articles from Braydon Coyer?

Support the author by donating an amount of your choice.

Recent sponsors
Tommi Urtti's photo

Just recently started using Tailwind and it's pretty fun once you get the hang of it.

Will definitely give this a go as well!

Braydon Coyer's photo

As much as I like CSS naming methodologies, Tailwind is something special if you can use it long enough to really see its value!

Let me know what you think of v2.0 when you get to try it out!

Bolaji Ayodeji's photo

Amazing!

Emil Moe's photo

You pushed me over to Tailwind

Braydon Coyer's photo

That's what I like to hear! Let me know what you think! Take some time to get over the initial push-back feeling of seeing so many classes in your HTML. After a while, it really starts to shine.

Abiola's photo

The new features are really great

Darsh Shah's photo

This seems Super Cool!!!🤩 Will definitely give it a try. Thanks for sharing👍

Paweł Kowalski's photo

The best thing is, if you kep up with the warning, upgrade is not going to break anything.

I just straight up upgraded it to 2.x in v boilerplate and it "just works".

So cool not to: a) have good migration guide (like in the good old jquery times) b) not have to use it because everything works out of the box

Surjith S M's photo

Great roundup.

Here's an upgrade guide if anyone is interested: blog.surjithctly.in/whats-new-in-tailwindcs..

Favourite Jome's photo

I've got to try out the dark mode feacture

Braydon Coyer's photo

Yes for sure! Once I get some time to really dig into the new update, I'll be doing a tutorial on dark mode support!

Favourite Jome's photo

That'll be helpful 👍 Braydon Coyer