Ring opacity variable being set to 1 on Ring Color

[marceloadsj]

Describe the problem:

Basically, if you create a common class for a component using ring opacity, let's say:

.btn {
  @apply ring-opacity-50;
}

Then create specific classes for each variant using ring color, example:

.btn-success {
  @apply ring-green-500;
}

The ring color utility will set --tw-ring-opacity to 1. As it comes after the first one, it will overwrite the opacity of the common class.

Maybe, instead of the ring color being like this:

.ring-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(16, 185, 129, var(--tw-ring-opacity));
}

It could be like that:

.ring-green-500 {
  --tw-ring-color: rgba(16, 185, 129, var(--tw-ring-opacity, 1));
}

Link to a minimal reproduction:

https://play.tailwindcss.com/TaUPvS5ZDq?file=css

[adamwathan]

Hey! This is intentional (whether good or bad) in order to be consistent with how all of the other color opacity utilities work. You'll have to re-specify the opacity when overriding the color I'm afraid and we can't change this without it being a breaking change.

Going to close as no plans to do anything about this any time soon since we don't want to make any breaking changes for another couple of years.