Tailwind Default Color Changes Between v0.7 and v1.0 cover image

Tailwind Default Color Changes Between v0.7 and v1.0

Jess Archer • March 18, 2019

With Tailwind v1.0 around the corner and including new default colors, you might be wondering what it means for your projects if you decide to upgrade. While it will of course be possible to maintain your existing color pallete, if you're anything like me and struggle to pick your own colors, you will be keen to see whether the new defaults might bring an extra edge to your designs.

In addition to some subtle hue changes, the new defaults increase from seven shade/tint variations per color to nine (not includng white and black) and have also changed naming conventions from descriptive words like "lightest" and "darkest" to a numeric grade ranging from 100 to 900. The increase in variations means that it might not be a simple case of running a find & replace on your code, although I'm sure the upgrade guide will offer some advice.

In the mean time, I thought it would be fun to put the old and new defaults side-by-side to give you an idea of what the changes are like, and which of the new colors you will be mostly likely to substitute.

I am very excited about the increase in colors as I have sometimes found myself wishing for a shade in-between. I also think this new pallet perfectly complements the practices described in Adam and Steve's book, Refactoring UI and strikes a great balance between having too many and too few constraints.

v0.7.4
v1.0
white
grey-lightest
grey-lighter
grey-light
grey
grey-dark
grey-darker
grey-darkest
black
white
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
black
red-lightest
red-lighter
red-light
red
red-dark
red-darker
red-darkest
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
orange-lightest
orange-lighter
orange-light
orange
orange-dark
orange-darker
orange-darkest
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow-lightest
yellow-lighter
yellow-light
yellow
yellow-dark
yellow-darker
yellow-darkest
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green-lightest
green-lighter
green-light
green
green-dark
green-darker
green-darkest
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
teal-lightest
teal-lighter
teal-light
teal
teal-dark
teal-darker
teal-darkest
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
blue-lightest
blue-lighter
blue-light
blue
blue-dark
blue-darker
blue-darkest
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
indigo-lightest
indigo-lighter
indigo-light
indigo
indigo-dark
indigo-darker
indigo-darkest
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
purple-lightest
purple-lighter
purple-light
purple
purple-dark
purple-darker
purple-darkest
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
pink-lightest
pink-lighter
pink-light
pink
pink-dark
pink-darker
pink-darkest
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900

If you're interested in visualising or visually tweaking your Tailwind color pallet, check out my Tailwind Color Picker. I'll be adding support for the new Tailwind config structure when Tailwind 1.0 is officially released.