Background opacity modifier does not work with CSS variable's fallback value

[mareksupruniuk]

What version of Tailwind CSS are you using?

version: 3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

play.tailwindcss.com

What version of Node.js are you using?

browser

What browser are you using?

chrome

What operating system are you using?

macOs

Reproduction URL

https://play.tailwindcss.com/djB8sJngwG

Describe your issue
Full example code:

<div class="flex flex-col gap-4 m-10 [--color-red:255_0_0]">
  <div class="h-10 w-80 bg-red-500">1. classic</div>
  <div class="h-10 w-80 bg-[#f00]">2. custom color</div>
  <div class="h-10 w-80 bg-[rgb(var(--color-red))]">3. custom color from var</div>
  <div class="h-10 w-80 bg-[rgb(var(--broken-var,var(--color-red)))]">4. custom color from var with fallback</div>
  <div class="h-10 w-80 bg-[rgb(var(--color-red))]/50">5. custom color from var with opacity</div>
  <div class="h-10 w-80 bg-[rgb(var(--broken-var,var(--color-red)))]/50">6. custom color from var with fallback and with opacity</div>
  <div class="h-10 w-80 bg-[rgb(var(--broken-var,var(--color-red))/0.5)]">7. custom color from var with fallback and with "manual" opacity</div>
</div>

It seems tailwind is unable to properly process such syntax: bg-[rgb(var(--broken-var,var(--color-red)))]/50. There's no output at all. The reason for this is most likely CSS variable being nested for fallback value.

For nested var() without opacity modifier: bg-[rgb(var(--broken-var,var(--color-red)))] the output is correct:

.bg-\[rgb\(var\(--broken-var\2c var\(--color-red\)\)\)\]{
  background-color: rgb(var(--broken-var,var(--color-red)))
}

The only reasonable workaround I found is to "manually" apply alpha value to rgb() function like so: bg-[rgb(var(--broken-var,var(--color-red))/0.5)], which gives an output that I would expect to get for the broken example:

.bg-\[rgb\(var\(--broken-var\2c var\(--color-red\)\)\/0\.5\)\]{
  background-color: rgb(var(--broken-var,var(--color-red))/0.5)
}

However, I think it would be great to be able to use consistent syntax across all use-cases.

[thecrypticace]

Hey, thanks for reporting this one. We weren't handling the case of a variable with a variable fallback when we had to parse the color (which we do when using an opacity modifier).

I've merged the fix in #12049 and it'll be available in our next release. In the meantime you'll be able to test it via our insiders build once it's built and published on NPM (takes like 10m I think):

npm install tailwindcss@insiders