CODEWITHSUNDEEP
csstailwind-csstailwind-ui
Poornima T
Poornima T

Reputation: 413

Default colors given in tailwind documentation are not working

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?

Upvotes: 30

Views: 63236

Answers (5)

Allison Barrezueta
Allison Barrezueta

Reputation: 11

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
            }
        }
    }
}

Upvotes: 0

Ovidiu Dolha
Ovidiu Dolha

Reputation: 5413

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.

Upvotes: 0

Danila
Danila

Reputation: 18536

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.

Upvotes: 47

huzaifa sameer
huzaifa sameer

Reputation: 91

Try this:

const colors = require('tailwindcss/colors')

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

Upvotes: 8

Toby Scott
Toby Scott

Reputation: 149

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;

Upvotes: 1

Related Questions