February 6th, 2021 · Read time 3 min

Tailwind 2x Color Changes

Just a heads up this this article is over 12 months old and might be out of date!

Tailwind 2.0 has introduced a massive new color palette! 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 palette, but there is still a refreshed orange palette that you can pull in to your config.

Tailwind 1
 
orange
Yellow

In addition to refreshing the default yellow palette, Tailwind 2.0 has added an amber palette 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 palette, but there is still a refreshed teal palette that you can pull in to your config.

Tailwind 1
 
teal
Blue

The blue palette 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 palette, 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.