Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Background opacity modifier does not work with CSS variable's fallback value
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**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:
```html
<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: 
```css
.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:
```css
.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.



Hints:

Patch:
diff --git a/src/util/color.js b/src/util/color.js
--- a/src/util/color.js
+++ b/src/util/color.js
@@ -5,7 +5,7 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
 let VALUE = /(?:\d+|\d*\.\d+)%?/
 let SEP = /(?:\s*,\s*|\s+)/
 let ALPHA_SEP = /\s*[,/]\s*/
-let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)(?:,(?:[^ )]*?|var\(--[^ )]*?\)))?\)/
 
 let RGB = new RegExp(
   `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`


Test patch:
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -1045,3 +1045,21 @@ it('can replace the potential alpha value in rgba/hsla syntax', async () => {
     }
   `)
 })
+
+it('variables with variable fallback values can use opacity modifier', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="bg-[rgb(var(--some-var,var(--some-other-var)))]/50"></div>`,
+      },
+    ],
+  }
+
+  let result = await run(`@tailwind utilities;`, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .bg-\[rgb\(var\(--some-var\,var\(--some-other-var\)\)\)\]\/50 {
+      background-color: rgb(var(--some-var, var(--some-other-var)) / 0.5);
+    }
+  `)
+})