Enable extended color palette

[adamwathan]

This PR updates the default config to include all of the colors available in the extended color palette.

This is a breaking change because several of the colors in the extended palette have names that conflict with the colors in the default palette, but we have included several measures to minimize the impact.

Changes

Default colors are no longer aliased

In v2.0, several of the default colors were actually aliases for the extended colors:

v2 Default	v2 Extended
gray	coolGray
green	emerald
yellow	amber
purple	violet

Although we still think this is a powerful way to think about curating your own color palette (it's nice to type bg-gray-500 instead of bg-cool-gray-500 everywhere in your app if you are only using one gray), it caused a lot of confusion and was hard to explain in the documentation.

For v3.0, all of the extended colors will be enabled by default and nothing will be aliased. As a result, the colors that were aliased in v2 will be renamed to their extended palette name, with the exception of gray, where we are renaming the extended color rather than the default color.

v2 Default	v2 Extended	v3 Unified
gray	coolGray	gray
green	emerald	emerald
yellow	amber	amber
purple	violet	violet

This means that after upgrading to v3, if you were using utilities like bg-green-500, text-yellow-700, or border-purple-400, the rendered output will be different, as green by default now refers to the old extended green, whereas in v2, green actually meant emerald (see what I mean about this being confusing?)

The default gray will still look the same after upgrading.

If you want to upgrade without changing the visual appearance of your project (which is what I would recommend), you would need to re-alias these colors in your config:

// tailwind.config.js
let colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        green: colors.emerald,
        purple: colors.violet,
        yellow: colors.amber,
      },
    },
  },
}

Of course if you are already using a custom color palette, this won't impact you at all.

Grays have been renamed

As part of enabling all of the extended colors by default, we've given the different gray shades shorter single-word names to make them more practical to use and make it less awkward for them to co-exist at the same time.

v2 Default	v2 Extended	v3 Unified
N/A	blueGray	slate
gray	coolGray	gray
N/A	gray	zinc
N/A	trueGray	neutral
N/A	warmGray	stone

Yes I know, gray should probably be the name of the neutral gray. The problem is that it would be a very painful breaking change, and breaking changes are very bad when they aren't absolutely necessary. Neutral grays are ugly anyways 🙃

Since only gray was enabled in the default v2 palette, this is not a breaking change for anyone who had not aliased any of the extended grays as part of a custom palette.

Furthermore, we've kept all of the old names that we could to ease the upgrade process, and just emit a warning if you import one of the old colors.

For example, this will still totally work, you'll just see a console warning letting you know that you should change trueGray to neutral in your config file:

// tailwind.config.js
let colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: colors.trueGray,
        // ...
      },
    },
  },
}

The only place this is not true is when importing the v2 extended gray color. Because v3 also has a gray (which used to be coolGray), it's impossible for us to emit a warning since we can't know if you are using the new gray intentionally, or if you are upgrading and expecting it to be the old gray.

If you were using the old gray color in your custom palette, you will need to change it to zinc to upgrade with no visual changes:

  // tailwind.config.js
  let colors = require('tailwindcss/colors')
  
  module.exports = {
    theme: {
      extend: {
        colors: {
-         gray: colors.gray,
+         gray: colors.zinc,
          // ...
        },
      },
    },
  }

Added transparent and current to tailwindcss/colors

Previously, the transparent and current (currentColor) colors were only present in the default config, and not included in tailwindcss/colors which meant you had to reference them like this when you wanted to include them in a custom palette:

// tailwind.config.js
let colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        gray: colors.trueGray,
        red: colors.rose,
        // ...
      },
    },
  },
}

Now, you can reference both of those options from the colors object, which feels a little bit more consistent and will help people avoid wasting 30 seconds expecting it to work but then having to change it:

// tailwind.config.js
let colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: colors.transparent,
        current: colors.current,
        gray: colors.trueGray,
        red: colors.rose,
        // ...
      },
    },
  },
}

Complete color reference

Here is a comprehensive list of how the default (not extended) v2 color palette compares to this new unified v3-destined color palette:

v2 Default	v2 Extended	v3 Unified
transparent	N/A	transparent
current	N/A	current
black	black	black
white	white	white
N/A	blueGray	slate	⚠️
gray	coolGray	gray	⚠️
N/A	gray	zinc	🚨
N/A	trueGray	neutral	⚠️
N/A	warmGray	stone	⚠️
red	red	red
N/A	orange	orange
yellow	amber	amber	🚨
N/A	yellow	yellow
N/A	lime	lime
green	emerald	emerald	🚨
N/A	green	green
N/A	teal	teal
N/A	cyan	cyan
N/A	sky	sky
blue	blue	blue
indigo	indigo	indigo
purple	violet	violet	🚨
N/A	purple	purple
N/A	fuchsia	fuchsia
pink	pink	pink
N/A	rose	rose

[mnaderian]

Finally!