Is there any way to replicate this tailwind functionality in twin?

[alanontheweb]

Original thread for context:

tailwindlabs/tailwindcss#3003

I wanted to know if there was a way to modify the output of my background/text/border/etc color classes to automatically append/combine a default --tw-text-opacity: 1;, so that I can enable scoped alphas within an HSLA value. This is possible in the original tailwind setup using a function in the tailwindconfig.

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 then in the theme config --

  base: {
        0: varToHsla('--base-0'),
        50: varToHsla('--base-50'),
        100: varToHsla('--base-100'),
        200: varToHsla('--base-200'),
        300: varToHsla('--base-300'),

Browser results:

[alanontheweb]

@ben-rogerson any advice? Thank you for your time

[ben-rogerson]

I'll take a look at this and get back to you 👍

[alanontheweb]

I think I may have found a workaround since twin styles things differently from tailwind. I'll report back if I'm wrong but it seems to be working properly with the cascade for now.