Variations on colours are removed when extending the main colour

[chrisgjarrett]

Tailwind` version: 3.4.1

I'm using tailwind in a NextJs project and have a question about overriding/extending colours. I have a tailwind.config.ts file where I have extended the colors palette like so:

const config: Config = {
    theme: {
        extend: {
            colors: {
                red: '#000000'
            }
        },
    },
    plugins: [],
};

I would have expected this to only override red, e.g. bg-red, text-red. It does this, but also seems to prevent me from using colours such as bg-red-200, bg-red-300.

Is there a way of retaining the variations on each colour, other than having to rewrite them into the colors field?

[wongjn]

Use the special DEFAULT key:

const config: Config = {
    theme: {
        extend: {
            colors: {
-               red: '#000000'
+               red: {
+                   DEFAULT: '#0000000',
+               },
            }
        },
    },
    plugins: [],
};

[chrisgjarrett]

Yep, that did it thanks!