DEV Community

Cover image for Tailwind 2.0 is released
Michael Sakhniuk
Michael Sakhniuk

Posted on • Updated on

Tailwind 2.0 is released

After 18 months when released v1.0, the 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

The 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.
  </p>
</div>
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-case

<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 a bad fact, but let's be honest - The most popular dream of web developers, who supporting and debugging IE11 every day, is to leave it and sleep better.

I 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

Top comments (0)