TailwindCSS setup for skins

main.css

@layer base {
  :root {
    --color-text-main: 235,14,56;  /* rgb values; can we have #fc,#10,#a0 ? */
    --color-text-accent: 197,100,134;
  }
  .some-class {
    --color-text-main: 197,200,34;
  }
}

tailwind.config.js

function withOpacity(variableName) {
  return ({opacityValue}) => {
    if (opacityValue != undefined) {
      `rgba(var(${variableName}), ${opacityValue})`
    }
    return `rgb(var(${variableName}))`
  }
}

module.exports = {
  theme: {
    extend: {
      textColor: {
        skin: {
          main: withOpacity('--color-text-main'),
          accent: withOpacity('--color-text-accent'),
        }
      },
      backgroundColor: {
        ...
      },
      gradientColorStops: {
        hue: withOpacity('--color-fill')
    }
  }
}

TailwindCSS setup for skins

TailwindCSS setup for skins

Thanks! Anyway, the Tailwind 3.1 makes this obsolete
https://tailwindcss.com/blog/tailwindcss-v3-1#easier-css-variable-color-configuration