Bg opacity not working

[toniopelo]

The following notations doesn't work as expected

bg-gray-12 bg-opacity-X => Opacity is ignored bg-gray-12/X => Background color is ignored entirely (this is the new recommended notation, see here)

I verified that without tw preset, these works with their default counterpart (bg-gray-900 bg-opacity-X and bg-gray-900/X)

[viktorbonino]

Radix colors have their alpha counterpart. So if you want to access the alpha variant you can for example use bg-jadeA-6 instead of bg-jade-6. It is better to stay follow how radix design system works, to avoid any inconsistency within the ui/styles. Also you can't use tailwind opacity utilites because the way radix themes use css vars is not compatible with how tailwind apply opacity.

[toniopelo]

Thanks for the answer, you're right I missed the alpha colors! Closing this.

[toniopelo]

Might be nice to have it removed from the list of possible tw classes thought ? Not sure how but I noticed that my vscode autocomplete properly for everything else (meaning only available values are shown), but these bg-opacity-* classes are still there. Would it be possible ?

[toniopelo]

I think I found another problem regarding this. Radix doesn't expose black and white colors (right ?) and sometimes you want black and white background or overlay with an opacity set. That doesn't seem easily doable as the opacity (alpha colors) are only bound to exposed radix colors. This prevent me from doing bg-[#fff] bg-opacity-25. Am I right or is there a trick I don't see @viktorbonino ?

[viktorbonino]

Radix exposes black and white alpha colors. I will soon update the preset with the black and white alpha colors.

[viktorbonino]

I updated the preset.Now you can access blackA and whiteA alpha colors.

[toniopelo]

Thanks a lot!