Default colors given in tailwind documentation are not working

user_15551895 0
Viewed 9851

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?

tailwind-ui tailwind-css css
2 Answers

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.

user_56504470

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;
user_60001730
Related