Color opacity modifier for custom colors

[tobiolalusi]

What version of Tailwind CSS are you using?

v3.0.23

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

postcss 8.4.7 based on create-react-app

What version of Node.js are you using?

v16.13.2

What browser are you using?

Chrome, Firefox

What operating system are you using?

MacOS

Describe your issue

I'm trying to add some opacity to the ring feature of tailwind. In the documentation, it shows one can add opacity by doing thus:

However, since all my colors are custom, I can't seem to get it to work with my custom colors.
Are there any workarounds to this? or the feature for this opacity with custom colors is currently not possible?

[thecrypticace]

Can you provide more information or a Tailwind Play (https://play.tailwindcss.com) that reproduces what you are seeing?

Here's an example with custom colors, rings, and opacity that works as expected: https://play.tailwindcss.com/s3EUsK57K7

[adamwathan]

Are you using CSS variables for your colors by any chance? If so make sure you follow the documentation for using CSS variables:

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

[tobiolalusi]

I wasn't aware it was to be specially configured. Thank you guys for your response!

[uladsemenik]

What if color has to have alpha by default #33cc8880 = 51 204 136 / 50%?

[wongjn]

You can have the concrete alpha value in the Tailwind configuration definition in place of <alpha-value>: https://play.tailwindcss.com/fypDxt5Npg

[eddsaura]

The bad thing tho is that I don't see the little swatch of the color, thats sad 😢