rgb(from <color> R G B / A) syntax seems losing original alpha channel

[gene9831]

Environment

• @mantine/core: 7.14.0
• tailwind-preset-mantine: 1.3.0
• tailwindcss: 3.4.14

Description

After upgrading to version 1.3.0, tailwind-preset-mantine brings new features, which is support alpha-value. So we can use syntax like text-gray-700/50 to get the color with a alpha value. The principle of this feature is to wrap css color variables througth syntax rgb(from <color> R G B / A). This change seems to have caused a bug where the alpha channel in original css variable color was lost.

You can see the comparison between the two pictures below

Using rgb(from <color> R G B / A) syntax. The color calculation result is color(srgb 0.133333 0.545098 0.901961)

Using css variables

[songkeys]

Thank you for this issue! Nice catch. But I don't think there is good way to fix this?

I think we should probably:

a. revert this change?
b. hard calculate the color from rgba into rgb (but it will losing the original alpha channel)?

What do you think?

Related: tailwindlabs/tailwindcss#9143 (comment)

[gene9831]

Maybe just revert those codes where the colors are in rgba format. I checked Mantine Default CSS variables list
, found that only the following color variables are in rgba format.

• --mantine-color-*-light
• --mantine-color-*-light-hover
• --mantine-color-*-outline-hover

Of course this solution still cannot prevent users from defining custom color variables in rgba format.

[songkeys]

This has been temporarily fixed in #9 and released in v1.3.1. I'll keep this issue open, though, until we find a better approach.

[songkeys]

This should be fixed in tailwind v4 and sdk v2.0.1