Color opacity modifier for custom colors #7736
-
|
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: |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I wasn't aware it was to be specially configured. Thank you guys for your response! |
Beta Was this translation helpful? Give feedback.
-
|
The bad thing tho is that I don't see the little swatch of the color, thats sad 😢
|
Beta Was this translation helpful? Give feedback.
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