Extending colors does not work as the name implies and does not allow for border-opacity

When a color is extended like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        'pink': {
          '000': '#fdf5f7ff'
        }
      }
    }
  }
}

then 2 things happen:

1. the color definitions on pink are overwritten completely (and not overridden), which means that all the definitions on 100, 200, 300 etc get lost ; they must be redefined. extend makes me expect a different behaviour, which is to add to the color definition and/or update an existing one, but not loosing other definitions (which is what happens with boxShadow, e.g.).

2. Once a color is extended / overwritten, it is not possible to use opacity on the border color.

While existing colors get redefined like this:

/* generated CSS taken from the Chrome DevTools */
.text-gray-900 {
    --text-opacity: 1;
    color: #1a202c;
    color: rgba(26, 32, 44, var(--text-opacity));
}

overwritten colors do not receive that kind of treatment. A usage like this

//- pug
div(class="border-l border-b border-pink-500 border-opacity-25")

is translated (or actually not translated) to this:

/* generated CSS taken from the Chrome DevTools */
.border-l {
    border-left-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}
.border-opacity-25 {
    --border-opacity: 0.25;
}
.border-pink-500 {
    border-color: rgba(115,27,56,1);
}

This also happens with “new” color keys, e.g. pink-bright: colors seem to always be translated to rgba adding 1 for the alpha channel and ignoring the CSS variable --border-opacity.

I am not sure if these are “expected behaviours” or missed out on something in the documentation - if so, I apologise for wasting your time!

In any case: Thank you very much!

[rowild]

@estevanmaito Your answer is soooo valuable!!! Thank you a million times! I didn’t realise my 8 digit hex code! Thank you so much for pointing that out to me!

(I use a Hex3rgba converter in VScode, along the way I defined the colors as rgba values, and when converting back to HEX I missed out the last ff completely, also because of the font that makes two consecutive Fs very, very narrow… Again: thank you very, very much!!!)

Also, he docu points out spreading - fantastic! Should have thought of that, since it is used throughout tailwindcss anyway!

Gratefully closing this issue! Have a good day!

[ryanfitzer]

Exactly what I was just trying to think through. Thanks so much for your quick responses!