Tailwind CSS: how to use color variables in tailwind.config.js

Question

I want to use color variable (default, or extended) to my extended theme like:

module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                lime: {
                    '100': 'green'
                }
            },
            backgroundColor: {
                skin: {
                    base: 'bg-red-500',
                    secondary: 'lime-100',
                },
            },
        },
    },
    plugins: [],
};

but this isn't working. How can I have a class bg-skin-base equivalent to bg-red-500 and another class bg-skin-secondary that is equivalent to bg-[green]?

GUID_33 · Accepted Answer · 2022-01-27 00:35:28Z

5

There isn't a backgroundColor. Any colors added under extend > colors are available for text-, bg-, border- etc.

Just add skin under colors and you should be good.

tailwind docs reference

const colors = require("tailwindcss/colors")

extend: {
   colors: {
      lime: {
        '100': 'green'
      },
      skin: {
        base: '#yourhex",
        secondary: '#yourhex",
        third: colors.violet["500"]
      }
   },
}

You can't use bg-red-500 like you have in your example for base. If you are looking to alias a tailwind color you can either use the hex or use tailwind colors by const colors = require("tailwindcss/colors") and then you can do colors.red[500] or whatever color you want.

edited Jan 27, 2022 at 0:35

answered Jan 25, 2022 at 22:13

GUID_33

8001 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abc Over a year ago

What do you mean by Just add skin under colors and you should be good.? Can you provide a code example?

GUID_33 Over a year ago

@abc added to the answer

abc Over a year ago

I don't want to use my own hex colors though, I want to use the shade of red in say bg-red-500. base: 'var(--red-500)' is what I want to do, but it doesn't work.

GUID_33 Over a year ago

You have to require tailwind colors and then you can reference any tailwind color you want (skin.third) is the example above.

mimi klein Over a year ago

You can extend backgroundColor as an option as well. Docs reference

Collectives™ on Stack Overflow

Tailwind CSS: how to use color variables in tailwind.config.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related