February 26, 2021

Tailwind 2.0 Color Changes

Tailwind 2.0 has introduced a massive new color pallete! It's so big that not all of the colors made it in to the defaults.

Each color now has an extra shade called "50" which in some cases is closer to the old "100" value than it is to the new "100".

However, orange and teal are now no longer included in the defaults. Presumably because each color results in a massive number of extra utility class variations.

To make it easier to see what's changed, I have included the Tailwind 1.0 colors alongside the new colors.

Gray

Tailwind 2.0 now has FIVE different grays to choose from. The default gray being coolGray.

Tailwind 1
coolGray
(default)
blueGray
gray
trueGray
warmGray
Red
Tailwind 1
red
(default)
Orange

Tailwind 2.0 no longer includes orange in the default pallete, but there is still a refreshed orange pallete that you can pull in to your config.

Tailwind 1
orange
Yellow

In addition to refreshing the default yellow pallete, Tailwind 2.0 has added an amber pallete as well, which they like so much that they've mapped it as the default yellow

Tailwind 1
amber
(default)
yellow
Green

So many greens! The default green actually maps to emerald, rather than green, but you can change this in your config.

Tailwind 1
emerald
(default)
lime
green
Teal

Tailwind 2.0 no longer includes teal in the default pallete, but there is still a refreshed teal pallete that you can pull in to your config.

Tailwind 1
teal
Blue

The blue pallete has also exploded! While the default blue maps to blue, I think the new lightBlue looks a lot closer to the Tailwind 1.0 blues, if you happened to prefer that.

Tailwind 1
blue
(default)
lightBlue
cyan
Indigo
Tailwind 1
indigo
(default)
Purple

Steve and Adam love their purples! And as with the green pallete, the default purple does not map to purple, but instead to violet.

Tailwind 1
violet
(default)
purple
fuchsia
Pink
Tailwind 1
pink
(default)
rose

For more information on the colors, check out the Tailwind 2.0 docs and be sure to check out the full color reference at the bottom of the page.