Default colors given in tailwind documentation are not working

Question

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?

Danila · Accepted Answer · 2023-04-19T16:00:09.333

33

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

You either need to update to version 3 or use version 2 documentation and expand palette manually, like that:

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

module.exports = {
  theme: {
    extend: {
      colors: {
        // you can either spread `colors` to apply all the colors
        ...colors,
        // or add them one by one and name whatever you want
        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.

edited Apr 19 '23 at 16:00

answered Jan 14 '22 at 10:02

Danila

15,606
2
35
67

Thanks! I'll try this one. I had actually tried using the color names on version3 at tailwind playground but i had not overridden the config file and tried so I could not get those colors. ref-( https://play.tailwindcss.com/gbngSXMwJt?file=config) . – Poornima T Jan 15 '22 at 14:19
Again, what you have linked is a v2 playground, not v3. There is selector in the top right corner to chose version. Here is v3 playground with colors working out of the box https://play.tailwindcss.com/AD4gMp7Nxm – Danila Jan 15 '22 at 14:27

score 5 · Answer 2 · edited Mar 03 '23 at 07:37

5

Try this:

const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        extend: {
            colors: {
                   //just add this below and your all other tailwind colors willwork
                ...colors
            }
        }
    }
}

edited Mar 03 '23 at 07:37

Sunderam Dubey

1
11
20
40

answered Mar 03 '23 at 06:54

huzaifa sameer

59
1
4

1

This solves my issue since I added color after theme bracket, not inside extend bracket. Thanks Huzaifa – Moh Alaraabi Mar 07 '23 at 17:58

score 1 · Answer 3 · answered Jul 03 '22 at 04:33

If you're using the PostCSS 7 Compatibility Build (https://www.npmjs.com/package/@tailwindcss/postcss7-compat) then you'll need to add the colours to tailwind.config.js like so:

const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        extend: {
            colors: {
                stone: colors.warmGray,
                sky: colors.lightBlue,
                neutral: colors.trueGray,
                gray: colors.coolGray,
                slate: colors.blueGray,
            }
        }
    }
}

Explanation: I was having the same issue (with the Compatibility Build) so I did some digging and found the following in colors.d.ts, which means you can add the above to the tailwind.config.js file in your project to use those same colours with their v3 utility class names (e.g. "bg-neutral-800").

/**
 * @deprecated renamed to 'sky' in v2.2
 */
lightBlue: TailwindColorGroup;
/**
 * @deprecated renamed to 'stone' in v3.0
 */
warmGray: TailwindColorGroup;
/**
 * @deprecated renamed to 'neutral' in v3.0
 */
trueGray: TailwindColorGroup;
/**
 * @deprecated renamed to 'gray' in v3.0
 */
coolGray: TailwindColorGroup;
/**
 * @deprecated renamed to 'slate' in v3.0
 */
blueGray: TailwindColorGroup;

Default colors given in tailwind documentation are not working

3 Answers3