The color palette in the docs does not match the default one

[tobx]

Describe the problem:

The docs state here:

We even do this in the default configuration, aliasing coolGray to gray, violet to purple, amber to yellow, and emerald to green.

But for example yellow and amber are different and I was quite confused today when I realized that the colors shown in the docs do not match the default ones.

Minimal reproduction:

const colors = require("tailwindcss/colors");

console.log(colors.amber[500]); // #f59e0b
console.log(colors.yellow[500]); // #eab308

[adamwathan]

This can be a bit confusing for sure but the docs are correct. The default colors that are enabled in Tailwind by default are aliased to simpler names, which is something we generally recommend folks do in their own apps.

Here are the colors that are included in Tailwind by default (in the default config file):

https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L15-L29

const colors = require('tailwindcss/colors')

module.exports = {
  // ...
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
  },
  // ...
}

You'll notice that we alias "amber" to "yellow", "coolGray" to "gray", "emerald" to "green", and "violet" to "purple".

The tailwindcss/colors file is a big file full of tons of different colors you can choose from, and they all have very specific names so that the names can be unique. There are 5 different types of "gray" in there for example.

If you chose to use "blueGray" in your app, you probably still want the classes to be bg-gray-500, not bg-blue-gray-500, because there is no need to differentiate between multiple types of gray in an app context since you are most likely only going to use a single one.

So yeah, colors.yellow.500 is not the same as bg-yellow-500, because the default color palette is a curated palette built from the larger color library.

You can see the default color palette at the top of the "customizing colors" docs, where we mention what the source color is for each color, like "amber" for "yellow" here:

The complete color palette at the bottom of the page is a reference for the entire "tailwindcss/colors" file which is the pool of colors that the default palette is built from, it's not the default palette in and of itself.

Hope that helps!

[tobx]

Got it, thank you. Amazon work! (and next time I will read the docs to the end 😳)