Tailwind CSS v2.0 is now released

Published on November 18th, 2020 by Eric L. Barnes

Tailwind CSS v2.0 is now released and includes tons of great new features. For a quick overview of some of the highlights check out this launch video they made:

To give you an idea on the production quality of the video, Steve Shoger said on Twitter, “Music in that trailer is a custom score arranged by Adam’s friend. The opera singer at the end is singing “utility-first” in Latin”

According to the release announcement updates shouldn’t be too hard:

Even though Tailwind CSS v2.0 is a new major version, we’ve worked really hard to minimize significant breaking changes, especially ones that would force you to edit tons of your templates. We’ve renamed two classes, removed three that are no longer relevant in modern browsers, and replaced two with more powerful alternatives. Any other breaking changes that might impact you can be remedied with a couple small additions to your tailwind.config.js file. Upgrading shouldn’t take more than about 30 minutes.

From that same announcement, here is a list of the major new features:

All-new color palette, featuring 220 total colors and a new workflow for building your own color schemes
Dark mode support, making it easier than ever to dynamically change your design when dark mode is enabled
Extra wide 2XL breakpoint, for designing at 1536px and above
New outline ring utilities, which are almost as good as if they would just make outline-radiusa real thing
Utility-friendly form styles, a new form reset that makes it easy to customize form elements (even checkboxes) with just utility classes
Default line-heights per font-size, because if we can’t make using a 1.5 line-height with a 48px font illegal we should at least make it not the default
Extended spacing, typography, and opacity scales, for fine-tuning things at the micro level, making an even bigger impact with huge headlines, and for when opacity-25 wasn’t enough and opacity-50 was too much
Use @apply with anything, including responsive, hover, focus, and other variants
New text overflow utilities, for controlling things more precisely than you can with truncatealone
Extend variants, so you can enable extra variants like focus-visible without redeclaring the entire list or thinking about order
Group-hover and focus-within by default, because you were enabling them on every project anyways
Default transition duration and easing curve, so you only have to add 17 classes to make a button instead of 19
Incompatibility with IE11, so you can tell the man upstairs “sorry boss it’s out of my hands, blame Tailwind”