I’m encountering an unexpected behavior when using Tailwind CSS in conjunction with shadcn/ui library for styling buttons. The problem arises when attempting to apply background opacity to a custom color defined in globals.css using HSL values as follows:
--primary: 348, 76%, 64%;
The issue occurs when trying to set the background opacity of a button using this custom color in shadcn/ui. For instance:
<button class="hover:bg-primary/90">Button</button>
The intention here is to have a button with a hover effect that applies 90% opacity to the background color defined as –primary. However, this opacity setting seems to have no effect, and the button retains its original opacity.
I have ensured that the custom color is properly defined and available in the project’s global styles. Yet, applying opacity to it using the Tailwind utility classes does not yield the expected result.