Focus ring opacity on text input not working with arbitrary value

[Noitidart]

What version of Tailwind CSS are you using?

"tailwindcss": "^3.0.18",

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

"next": "12.0.9",

What version of Node.js are you using?

v12.19.0

What browser are you using?

All

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/Tv8lkLkkLn

Describe your issue

A custom ring to text input with arbritrary value works fine like this:

<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />

However it's opacity cannot be reduced with focus:ring-opacity-30.

Trying it, causes the arbitrary value to be ignored, and the default ring from focus:ring shows.

<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)] focus:ring-opacity-30" />

Here is a great explantion by JHeth from Stackoverflow:
Tailwind arbitrary values don't work with rgb or rgba values, this issue on Github exposed it and this pull was supposed to fix it but you can still see the behavior on Tailwind Play quite clearly, there is no generated class when using arbitrary rgb values (if there were, a tiny color swatch would appear next to the class).

Major thanks to JHeth from Stackoverflow for helping identify this bug and creating the Tailplay - https://stackoverflow.com/a/71168939/1828637

[adamwathan]

Hey! Classes can't have spaces, remove the spaces and it works:

https://play.tailwindcss.com/BnVCX0a31C

The browser delimits the class attribute on spaces, so when you write this:

<div class="focus:ring-[rgba(0, 244, 0)]">

...the browser thinks you have added three classes:

focus:ring-[rgba(0,
244,
0)]

More here: https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace

[Noitidart]

Ohh sorry, actually my mistake. You're right it works. But I was using css vars and that's what's not working, I created new tailplay - https://play.tailwindcss.com/ClyzxS1tM0

This works:

<input type="text" class="border border-gray-200 focus:outline-none focus:ring focus:ring-[#000000] focus:ring-opacity-30"/>

This doesn't work:

<input type="text" style="--primary: #000000;" class="border border-gray-200 focus:outline-none focus:ring focus:ring-[color:var(--primary)] focus:ring-opacity-30"/>

[adamwathan]

Yeah not possible to use the opacity utilities alongside CSS variables like that, there's just literally no way to do it with CSS because setting the opacity means changing the actual color value.

Some docs related to that:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

Here's a demo where it does work, by only setting the color channels in the variable instead of the full color so that the final color can be composed alongside the opacity variable:

https://play.tailwindcss.com/DZbDhtoj3f

[Noitidart]

Oh thank you very much that is very interesting!