Default colors given in tailwind documentation are not working

Issue

I was trying to use colors such as amber and lime, which are mentioned in the documentation. These colors didn't work. Only colors with names such as the primary color name (eg. red, pink) worked.

Colors which are not working: amber, emerald, lime, rose, fuchsia, slate, zinc, and even orange.

I'm using version 2.26, but I used the Tailwind playground to check the versions between 1.9 and 2.25, and still these colors didn't work. Even in the playground, these color names are not suggested.

Why can't I use these colors?

Solution

This is documentation for Tailwind version 3, it has expanded color palette.

You either need to update to this version or use version 2 documentation https://v2.tailwindcss.com/docs/customizing-colors#extending-the-defaults and expand palette manually, like that:

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

module.exports = {
  theme: {
    extend: {
      colors: {
        amber: colors.amber,
        emerald: colors.emerald,
      }
    }
  }
}

More info about v2 color customization

Color palette reference v2

So, just read this v2 docs if you want to configure your palette.

Answered By - Danila