What’s New in Tailwind 2.0

The latest release brings big changes

Malcolm Laing
Nov 21 · 3 min read
Image for post
Image for post
Photo by Bobby Burch on Unsplash

Tailwind is by far, the most popular utility CSS framework. It’s changed the way we build web applications, and how we work with CSS. It’s themeable, extendable, and easy to work with.

I love Tailwind because it lets me concentrate on shipping. I can build full features, full pages, without ever leaving my HTML. Instead of having to write display: flex; everywhere, I can just use a class name. I enjoy the utility first approach championed by Tailwind.

Tailwind 2.0 is the first major release since Tailwind 1.0 was released in 2019, and it brings a slew of changes, tweaks, and new features.

Let’s get into it.

New color palette

Tailwind 2.0 brings us 22 colours, with 10 shades per colour. This is a big increase from the previous 10 colors with 9 shades that the previous version came with.

Image for post
Image for post
Image from https://blog.tailwindcss.com/tailwindcss-v2#all-new-color-palette

Dark mode!

Tailwind now ships with support for dark mode out of the box. Simply set the darkMode property in your tailwind.config.js to media.

// tailwind.config.jsmodule.exports = {
darkMode: 'media'
}

Now it’s as simple as prefixing your class names with dark. For a black background in dark mode, use the class dark:bg-black.

Extra-wide support

More and more people are using ultra-wide monitors these days, and Tailwind has your back. Just use the 2xl breakpoint to target screen widths 1536px or larger.

Outline ring utilities

This is the feature that I am most excited about. If you’ve ever worked with the outline property in CSS, you know that it’s a pain. It’s a nightmare to style and doesn't even support border-radius.

Now, with Tailwind 2.0, we can use focus:ring as a drop-in replacement for outline. Combine this with a polyfill for focus-visible, and we can create accessible websites without impacting our non-keyboard users.

Better form styles

One of the limitations of Tailwind 1.0 was how difficult it was to style input elements like checkboxes and radio buttons. Now with Tailwind 2.0, we can use the official @tailwindcss/forms plugin to reset form styles cross-browser, and make them easy to style with utility classes.

More spacings, typography and opacity scales

Tailwind 2.0 comes with a bunch of new ways to fine-tune our designs. To see everything that’s available, check the default tailwind config file.

More defaults

Tailwind now makes some assumptions. They have added a default transition-timing and transition-timing-function.

They also made all font-size classes come with a built-in line-height attribute. We can also override this behaviour by using the leading-normal class name.

Few breaking changes

While Tailwind 2.0 has breaking changes, the team behind Tailwind ensures us that most users will spend less than thirty minutes upgrading. They renamed a few classes, removed some classes that are not necessary for non-legacy browsers, and replaced a few others.

And more

To read about all of the new features in Tailwind 2.0, be sure to check out the official blog post.

Wrapping things up

Tailwind 2.0 is a release that takes a good product and makes it better. This release is mostly small tweaks and improvements, and it shows that the team behind Tailwind listens to the community.

Now it’s easier than ever to create unique and compelling websites with Tailwind, that look nothing alike.

I’m excited about the future of Tailwind and the future of utility-first CSS.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Sign up for Highlights

By Frontend Digest

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store