Is this a valid way to use inline CSS variables in Tailwind?

[I-ad]

Issue: Help

I'm using the following code:

const container = cva(
  "ccui:[--icon-size:var(--spacing-4)]",
  {
    variants: {
      size: {
        sm: "ccui:[--icon-size:var(--spacing-4)]",
        md: "ccui:[--icon-size:var(--spacing-4)]",
        lg: "ccui:[--icon-size:var(--spacing-5)]",
        xl: "ccui:[--icon-size:var(--spacing-5)]",
      },
    },
    defaultVariants: { size: "md" },
  }
);

Is this a valid approach to using inline CSS variables?

Note: I’m using --icon-size in multiple elements within the component, which is why I’m defining it this way.

Thanks in advance!