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

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]?

tailwind-css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

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

Sources

Related Questions