Cover image for Tailwind 2.0 is released

Tailwind 2.0 is released

sakhnyuk profile image Mikhail Sakhnyuk ・2 min read

After 18 month when released v1.0, Tailwind team introduces Tailwind 2.0

Key updates and new features:

A New color palette

Now Tailwind has 220 colors (22 colors with 10 shades each) and 5 includes shades of gray color
Alt Text

Dark mode

Most desired feature is available now
Dark mode in Tailwild easy to use and it works with background colors, text colors, border colors, and even gradients out-of-the-box

Simple example:

<div class="lg:bg-white lg:dark:bg-black">
  <p class="text-gray-500 dark:text-gray-300">
    The feature you've all been waiting for.
Enter fullscreen mode Exit fullscreen mode

Extra wide 2XL breakpoint

New 2xl breakpoint out-of-the-box that lets you target things at 1536px and above:

<h1 class="... 2xl:text-9xl">Godzilla</h1>
Enter fullscreen mode Exit fullscreen mode

Default line-heights per font-size

Every utility font-size now comes with a sensible default line-height. More info about it is here

Extended spacing, typography, and opacity scales

Tailwind in v2 spacing scales has been extended and now you able to use more values for every use-cases

<span class="ml-0.5">Just a little nudge.</span>

<div class="p-96">This is too much padding.</div>
Enter fullscreen mode Exit fullscreen mode

Use @apply with anything

Good news that you able to use @apply with every Tailwind class

.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
Enter fullscreen mode Exit fullscreen mode

Drop IE11 support

Somebody can say about is bad fact, but let's be honest - Most popular dream of web developers, who supporting and debugging IE11 every day, is leave it and sleep better.

I'm congratulate Tailwind for do that step after Bootstrap.
And don't forget is that if you need to support IE11, you can always use Tailwind CSS v1.9

Read more about Tailwind 2.0 in release notes and documentation


Editor guide