Tailwind CSS: Referencing to custom color in tailwind.config.js

Question

In order to streamline my theming I'd like to reference to a custom color I defined and then pass it through a function to get a lighter or darker variant.

I extend the default color theme using the following (partial) code:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: '#325889',
                    light: '#5aacbb',
                    lighter: '#5ebebf',
                },
            },
        },
    },
}

Now my goal is to somehow reference the colors.primary in another custom color variant to pass it into a custom function, something like this:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: '#325889',
                    light: '#5aacbb',
                    lighter: '#5ebebf',
                },
                gradient: {
                    '0\/3': this.theme.extend.colors.primary,
                    '1\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333),
                    '2\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666),
                    '3\/3': this.theme.extend.colors.primary.lighter,
                }
            },
        },
    },
}

However, I can't seem to reference the primary color in any way. I tried this.colors.primary, this.theme.extend.colors.primary but can't seem to get it up and running.

Any clues on how to do this would be greatly appreciated.

Cheers!

NvN NvN · Accepted Answer · 2021-10-02T07:58:51

You can create new variable to keep the value of your extended colors:

const primary = '#325889';
const primaryLight = '#5aacbb';
const primaryLighter = '#5ebebf';

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: primary,
                    light: primaryLight,
                    lighter: primaryLighter,
                },
                gradient: {
                    '0\/3': primary,
                    '1\/3': getGradientStop(primary, primaryLighter, 33.333),
                    '2\/3': getGradientStop(primary, primaryLighter, 66.666),
                    '3\/3': primaryLighter,
                }
            },
        },
    },
};

Tailwind CSS: Referencing to custom color in tailwind.config.js

1 Answers