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
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>
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>
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>
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;
}
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
Top comments (0)