Ring opacity not working with tailwind custom color

[iamyahia]

Hi everyone,

I'm having an issue with Tailwind's ring class. I created a custom color called primary-300 and am trying to use it as the ring color for an input component. I also want to adjust the ring's opacity, but it isn’t working with my custom color.

Here’s what I found:
Default Tailwind colors work fine ✅:
focus-within:ring-4 focus-within:ring-purple-700 focus-within:ring-opacity-50
or
focus-within:ring-4 focus-within:ring-purple-700/10

Custom colors don’t work ❌:
focus-within:ring-4 focus-within:ring-primary-300 focus-within:ring-opacity-50
focus-within:ring-4 focus-within:ring-primary-700/10

Here’s a playground link showing the issue: Tailwind Playground.

[wongjn]

In the ring-opacity-* case:

Tailwind doesn't "know" what your CSS variable value is and thus has trouble injecting the opacity modifer in properly. It seems you'd need to explicitly set the <alpha-value> token in the colors: https://play.tailwindcss.com/TdpRvQbdpN?file=config.

In the /<opacity> case:

When you use the hsl() function, Tailwind seems to assume you are using modern hsl() syntax. However, in the CSS, the variables are declared with legacy syntax. So, you could do one of:

• Use the hsla() function in the color declarations for the legacy syntax: https://play.tailwindcss.com/r7qhG1Qri1?file=config
• Rewrite the CSS variables to modern hsl() syntax: https://play.tailwindcss.com/hJTltl9h4D?file=css

[iamyahia]

You're right! ✅ If we use hsl Tailwind can’t adjust opacity for the ring unless we set an alpha value.

Note
I recommend using the first solution with ring-opacity-* since we can also work with /Opacity syntax, like this: ring-primary-300/50. The other two solutions (using /Opacity syntax) have an issue: if we try to add and use ring-opacity-*, it won’t work.

Well done @wongjn and Thanks for your solution response, keep going my brother 👏.