Pass in tw-bg-opacity and tw-text-opacity when given CSS variable color values (not just Hex)

@adamwathan When assigning Tailwind config color values as hexadecimals, tailwind does an awesome trick with CSS variables to enable tailwind to do bg-opacity and text-opacity, by converting the hex into RGBA and then passing those CSS variables as the alpha channel. Then for every bg class and text class to ensure the CSS variable is properly scoped, it also assigns each class a default tw-bg-opacity or tw-text-opacity CSS variable that equals 1 to reset it and prevent it from bleeding out of that utility class.

However, when I assign an HSL value that holds my own CSS variable (used to efficiently toggle different theming in the UI with a quick body class swap), the --tw alpha channels and CSS variable properties get stripped when tailwind is compiled.

Example of a line item in my config -

400: 'hsl(var(--primary-400))`,
500: 'hsl(var(--primary-500))`,

Note that I could convert it to RGB if needed, or completely strip out the color format (I’m flexible in the syntax as long as I get to retain using CSS variables), but I just need the alpha channel to be appended, and for the individual --tw-bg-opacity and --tw-text-opacity CSS variables to also be added for the bg and text classes respectively.

[alanonthegit]

@adamwathan works great! For other folks who may need this in the future, you can make a function in your tailwind config like so:

   const varToHsla = (colorValue) => ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `hsla(var(${colorValue}), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `hsla(var(${colorValue}), var(${opacityVariable}, 1))`
        }
        return `hsl(var(${colorValue}))`
      }

And in your color object do something like this:

 primary: {
                100: varToHsla("--primary-100"),
                200: varToHsla("--primary-200"),

[germsb]

/*index.css*/
:root {
  --primary-choice-1: theme('colors.blue.500');
  --primary-choice-2: theme('colors.purple.500');
  --primary-choice-3: theme('colors.red.500');
  --primary-choice-4: theme('colors.pink.500');
  --primary-choice-5: theme('colors.yellow.500');
  --primary-choice-6: theme('colors.green.500');
  --color-primary: var(--color-prim-1);
}

//tailwind.config.js
...
colors: {
  primary: 'var(--color-primary)'
}
...

//somewhere in js
document.documentElement.style
                .setProperty('--color-primary', `var(--primary-choice-${primaryNumber})`);

I like this idea, but unfortunately does not work with opacity. Maybe a directive like theme(hexToRGB(colors.blue.500)) in the near future?