Default ringColor has opacity baked into it

[ekfuhrmann]

What version of Tailwind CSS are you using?

v3.0.22

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.6, webpack 5.65.0

What version of Node.js are you using?

For example: v17.5.0

What browser are you using?

Edge (Chromium)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/DXtIUnfIC0

Describe your issue

When trying to set the default color for ringColor, it seems like an opacity of 0.5 is being applied regardless of the defined color. In my example I wanted to set the default ring color to be #000, but the output ends up becoming --tw-ring-color: rgb(0 0 0 / 0.5);.

Ideally, I'd like to be able override that default opacity with a defined opacity of my own choosing, or have the color defined for DEFAULT just override whatever opacity is being applied.

[adamwathan]

Hey! This is because ringOpacity has a DEFAULT of 0.5. If you override that as well you get the result you want:

https://play.tailwindcss.com/CwV0YGg3LS?file=config

The whole ringOpacity thing isn’t really documented anymore though because we are encouraging the opacity modifier as of v3, so going to leave this open just to prompt us to figure out how to document this or what to do about it.

[ekfuhrmann]

Ah, fantastic. Thank you.

[olets]

encouraging the opacity modifier

I see that intellisense in play.tailwind.com has class suggestions for <div class="ring/ but they don't have associated styles. Are there plans to support the opacity modifier on the default, maybe ring/100 or ring ring/100? Or is that a separate ring feature request and a separate intellisense bug?

[adamwathan]

Just revisiting this, spent like 45 minutes talking through it with @thecrypticace and I think we would like to change this so that the ringOpacity.DEFAULT value didn't inject itself into your custom ringColor.DEFAULT value but it would be a breaking change, since anyone who has currently customized ringColor.DEFAULT would now see a different color after updating. It feels a little too breaking to just call it a bug fix to me unfortunately.

I think what we're going to do is feature flag this fix so that anyone who runs into this problem and finds this issue can see that there's a flag to opt-in to the breaking change early, and then in v4 we can make that the default and mention it in the upgrade guide.

Not sure when we will tackle this but leaving this as a note for myself anyways for when we look at this issue again 👍🏻

In the mean time, changing your ringOpacity.DEFAULT as explained earlier is the right way to solve this.

[thecrypticace]

We've come up with a solution here that we think works well and will become the default whenever we hit v4 in the future. A custom default ring color will not have it's opacity modified at all. Given that this is a breaking change it's been put behind a future feature flag (respectDefaultRingColorOpacity) but will ship with v3.1:

{
    future: { respectDefaultRingColorOpacity: true },
    content: [],
    theme: {
      ringColor: {
        DEFAULT: '#ff7700',
      },
    },
  }

Given the above config the default ring color will be #ff7700 and not have an alpha channel applied to it. Thanks for the report and helping push us to figure this one out!