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

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 palette, 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 including 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.

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.