Class output doesn't seem to work with RGB function

[sebpowell]

Hello,

Thank you for this library. I've been trying to get it working using the following setup: CRA v5 and Tailwind 3.3.3.

First of all, it would appear the instructions detailed in the README are out of date – the only way I was able to get it to work without throwing an error is as such:

const { withTV } = require("tailwind-variants/transformer");

const radix = require("windy-radix-palette");

module.exports = withTV({
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./stories/**/*.{js,ts,jsx,tsx}"],
  plugins: [
    radix({opacitySupport: true}),
  ],
});

Either that, or my setup doesn't work with the recommended approach for whatever reason.

This seems to work, in that a bunch of CSS variables are created and added to the :root selector, see here:

From what I gather, the alpha for color functions is defined in the following way (see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color):

color(display-p3 1 0.5 0 / .5);

The classes that are generated by this package look like this:

Applying this to any HTML element on the page doesn't actually turn the background red.

Changing the background-color attribute to simply var(--red-9) works fine. So I'm guessing the issue is that variables that use the color function cannot be passed in to the rgb function. I did a bit of Googling but couldn't find any clear answers – wondering whether I'm doing something wrong, or whether this is in fact a bug?

Thank you in advance.

[brattonross]

Hey, thanks for reporting your issue -- do you mind sharing which version of the package you are using?

[sebpowell]

@brattonross thanks for coming back to me. The above was using the latest version, which I believe was v2.0.0-beta.0. Let me know if you need any other info.

[brattonross]

Hi, I've tried to recreate your issue, but I'm not seeing the problems with getting the plugin setup that you are seeing. Take a look at this codesandbox where I've tried to make a minimal repro. I got the plugin working with the instructions in the readme, so I'm not sure what is different about your setup that might cause an error to happen.

I suspect that if we manage to get you using the plugin in the expected way, then your issue with the color opacity might get fixed as a side effect. To me it looks like the part of the plugin that generates the CSS variables thinks that opacity support is disabled, but the part that generates the Tailwind config thinks that it is enabled.

[sebpowell]

@brattonross – thank you so much for this – I tried using the latest version – the same version that you used in the sandbox, and it started working! Thanks for taking the time to look at it, it is greatly appreciated.