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-25wasn’t enough andopacity-50was 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-visiblewithout 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”
…and a bunch of other little things too.
Congrats to Adam Wathan, and the whole Tailwind CSS team. Go check out the new landing page and get ready for the next iteration of Tailwind CSS.
