Tailwindcss: [v1.4.2] bg-opacity doesn't apply to extended colors using css variables

[mvllow]

It appears that using a css variable when extending colors, a bg-opacity helper is not available.

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue'],
  theme: {
    extend: {
      colors: {
        primary: '#4f46cf', // ✅
        // --color-primary: #4f46cf
        primary: 'var(--color-primary)', // ❌
      },
    },
  },
}

<!-- Works as expected 🤗 -->
<button class="bg-blue-500 bg-opacity-75">Please love all</button>

<!-- Opacity does not apply if using var(--color-primary) in the tailwind config -->
<button class="bg-primary bg-opacity-75">Please love all</button>

[adamwathan]

Yeah this is simply because it's impossible as far as I know. Our implementation relies on the color being a static value so we can extract the rgb channels and redeclare the color like this:

.bg-red-100 {
  /* Original color */
  background-color: #fff5f5;

  /* rgb channels extracted and mapped to new rgba color */
  background-color: rgba(255, 245, 245, var(--bg-opacity));
}

There's no way that I know of to make this sort of thing work:

:root {
  --color-red-100: #fff5f5;
}

.bg-red-100 {
  background-color: rgba(var(--color-red-100), var(--bg-opacity));
}

This _does_ work:

:root {
  --color-red-100: 255, 245, 245;
}

.bg-red-100 {
  background-color: rgba(var(--color-red-100), var(--bg-opacity));
}

...but making that work in Tailwind is still probably not realistically possible, because even if you use var(--color-red-100) in your config we have no idea that the underlying value is in that special format, and if we assume it is and it's not things will be broken.

So unfortunately this is deliberately out of scope for now, and we intentionally don't support color opacity modifiers for any color that is not statically parsable (like currentColor as well).

[mvllow]

That makes sense, appreciate the explanation!

The only (possibly naïve) solution that comes to mind is using hex transparency, eg. #fa80724d. Doesn't solve the issue of being out of scope so I will close this, thanks again!

[mattrothenberg]

Apologies for commenting on a closed issue, but I wrote a PostCSS plugin that takes a stylesheet with a :root {} selector with CSS variable definitions inside and replaces all of the values in your Tailwind configuration with their corresponding HEX counterparts.

LMK if you're interested in seeing @mvllow