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?

Hair

Answer 1

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.

Total

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-( play.tailwindcss.com/gbngSXMwJt?file=config) . – Hair

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 play.tailwindcss.com/AD4gMp7Nxm – Total

Answer 2

Try this:

const colors = require('tailwindcss/colors')

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

Limnetic

This solves my issue since I added color after theme bracket, not inside extend bracket. Thanks Huzaifa – Meliorism

smart and elegant solution!! – Punctilio

Answer 3

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;

Decaliter

Answer 4

In my case, the problem was I was generating the class name in a VUE component (vite build) via a computed property as such:

stateColor() {
  return this.item.state === "filled" ? 'lime-600' :
      this.item.state === 'partial' ? 'yellow-600' :
          this.item.state === 'rejected' ? 'red-600' :
              'gray-600'
}

and

<div :class="'bg-' + stateColor"></div>

It worked after I changed it so that the computed property included the prefix bg-:

stateColor() {
  return this.item.state === "filled" ? 'bg-lime-600' :
      this.item.state === 'partial' ? 'bg-yellow-600' :
          this.item.state === 'rejected' ? 'bg-red-600' :
              'bg-gray-600'
}

and

<div :class="stateColor"></div>

I think with this setup makes so tailwind doesn't load the appropriate color classes unless it finds a usage, so avoiding (too) dynamically generated names is needed.

Norther

Answer 5

This is how i solved it:

import colors from "tailwindcss/colors";

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

Gironde