Adding a variant of red in extend.colors.red overrides the entire red shade. Why?

[Flepcher]

I don't know it's bug or this is the way tailwind behaviour.

//  ./tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          '50': '#FFF2F2'
        }
      }
    }
  }
}

After extending, the default config is gone.
Example:
I have a page that using <div class="bg-red-300" />, <div class="bg-red-50" />, <div class="bg-blue-300" />

After I extend red color, all property related to default red is gone. And the property of red only can be use by <div class=" *-red-50" />. While blue still there

If I extend using:

extend: {
  colors: {
    'red-50': '#FFF2F2'
  }
}

This follow the manual of extending can work properly.

Adding a new color is work fine:

//  ./tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        chocolate: {
          '50': '#D2691E'
        }
      }
    }
  }
}

What if I want to extend bunch of red colors? Should I just write

'red-1': '#COLOR'
'red-2': '#COLOR'
'red-(n+1) ': '#COLOR'

Or there's a shortcut way
Thank you 👍

[philippbosch]

Have a look at this:
https://tailwindcss.com/docs/customizing-colors#overriding-a-single-shade

Although this talks about overriding, adding a new color shade works exactly the same.

[simonswiss]

As @philippbosch mentioned, if you want to keep the existing red colors and add a red-50 variant on top of that, you need to make sure that your red object contains the existing values as well as the new one.

You can use the spread operator to do so:

//  ./tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          ...colors.red,
          '50': '#FFF2F2'
        }
      }
    }
  }
}