White Twice?

[neilchaudhuri]

Not sure if this is a bug or a feature, but I have found that adding the white utility causes white to be added twice to a style definition.

Given the following:

colors: {
      white: '#fff',
...
}

And

button {
    @apply border-none text-center text-white !important;
}

I find this:

button {
  border-style: none !important;
  text-align: center !important;
  --text-opacity: 1 !important;
  color: #fff !important;
  color: rgba(255, 255, 255, var(--text-opacity)) !important;
}

Is it right to have two color entries? Removing text-whitefrom the @apply call removes both.

Wanted to report this in case it is a bug.

[lihbr]

It's not a bug as it's part of the text-opacity utility, the first color output is just meant to be used as a fallback for IE (as it doesn't support css variables). If you don't want to see this and if you're fine leaving the text-opacity utility you can target your build toward IE: #1635 or disable the text-opacity utility: https://tailwindcss.com/docs/text-opacity#disabling

[neilchaudhuri]

Appreciate the clarification. Thanks.