bg-opacity-<value> doesn't work with arbitrary values

Hi, I want to use CSS variables with bg- and found that it doesn’t generate the style to adjust the background opacity.

Here’s playground link

--un-bg-opacity: 1; style is only generated for static class bg-red and not for bg-$c & bg-[red].

[chu121su12]

--un-bg-opacity: 1; style is only generated for static class bg-red and not for bg-$c & bg-[red].

As I understand, util-$value and util-[value] generally use the intended value as is, so usually there are no processing involved.

Thanks for the information. For CSS vars do I have to add each of them to colors as @chris-zhu mentioned above?

For now, you have to add them separately. The rationale is that --x in var(--x) can contain #f00, red, 255, 0, 0, rgb(255, 0, 0) or even any other string.

Another thing you can do maybe is to add custom shortcut

shortcuts: [
  [/^bg2-(.*?)$/, ([_, c]) => `bg-[rgba(var(--${c}),var(--un-bg-opacity,1))]`],
]

BTW, is there docs regarding magic strings/characters like : in bg-custom:50.

Mostly tailwind syntax works: variant:util, [prop:value] and color-util:opacity

[chu121su12]

In bracket, CSS color values are not resolved from theme or keywords. For the keyword part, you may want to add the list of values to the preset.