Custom color with opacity modifiers doesn't appear to work

[carcer]

Currently, there are two requirements that need to be addressed:

1. Adding custom color: We need to add a custom color. The modifications have already been made in the CSS code as follows:

global.css

/* Added */
--success: 164, 95%, 43%;
--success-foreground: 164, 95%, 23%;

tailwind.config.js

success: "hsl(var(--success))",
"success-foreground": "hsl(var(--success-foreground))",

2. Creating a button variant using the new custom color: We need to create a button variant that utilizes the new custom color defined above. The code snippet for the button variant is as follows:

button.tsx

success: "bg-success text-success-foreground hover:bg-success/90",

However, we have encountered an issue where the Tailwind CSS opacity modifier does not seem to work for both the new custom color and the modified color.

Expected Behavior:

• The custom color with opacity modifier should be applied correctly in the CSS code.
• The button variant utilizing the new custom color should display the expected background color, text color, and hover effect.
• The Tailwind CSS opacity modifier should work as expected for both the new custom color and the modified color.

Steps to Reproduce:

1. Apply the provided CSS code modifications to add the custom color .
2. Implement the button variant code using the new custom color.
3. Apply Tailwind CSS opacity modifiers to the new custom color.

Additional Information:

• This issue prevents us from properly implementing the desired custom color and opacity modifiers in our application's UI.
• Any insights or suggestions regarding a workaround, alternative approaches to achieve the desired functionality would be greatly appreciated.

Environment:

• Framework/Libraries: Tailwind CSS, NextJs
• Tailwind Version: 3.3.2
• NextJs Version: 13.4.7
• Browser: Firefox
• Operating System: Manjaro Linux 5.15.114-2-MANJARO

Example Repository:

An example repository demonstrating the issue can be found at: https://github.com/carcer/psychic-adventure

[dan5py]

Hi @carcer, in order to use the opacity modifier, you need to define new colors like this in your tailwind.config.js:

- success: "hsl(var(--success))"
+ success: "hsl(var(--success) / <alpha-value>)"

And also use the new hsl format in your css file (otherwise it won't work with the /):

- --success: 164, 95%, 43%;
+ --success: 164 95% 43%;

If you don't want to use the new hsl format in the tailwind.config.js put this instead:

success: "hsl(var(--success), <alpha-value>)"

Making these changes should do the work. Let me know.

[carcer]

@dan5py Great, appears to have been mostly a PEBKAC issue! Everything works as expected, thanks you every much for your time!

[nextglabs]

The <alpha-value> isn't required in the tailwind.config.ts file. What's causing the problem is the use of commas between the HSL values.

/* global.css */
- --success: 164, 95%, 43%;
+ --success: 164 95% 43%;
- --success-foreground: 164, 95%, 23%;
+ --success-foreground: 164 95% 23%;