CSS variables not working as arbitrary values if it has more than 2 words

[onmax]

What version of Tailwind CSS are you using?

v3.0.23

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

Tailwind Playground

What version of Node.js are you using?

Tailwind Playground

What browser are you using?

All browsers

What operating system are you using?

All OS

Reproduction URL

https://play.tailwindcss.com/bE29J27Nvf

Describe your issue

I declare my CSS variables in :root like:

<style>
 :root {
    --my-var: rgb(7 89 133);
    --only-3-words: 20px;
    --my-var-with-more-than-3-words: rgb(7 89 133);
    --my-var-for-leading: 1.5;
  }
</style>

Then I want to use them as arbitrary values like:

<h1 class="text-[color:var(--my-var)]">This is my first h1</h1>
<h1 class="p-[var(--only-3-words)]">This is second h1</h1>
<h1 class="text-[color:var(--my-var-with-more-than-3-words)]">And this is my third h1</h1>
<h1 class="leading-[var(--my-var-for-leading)]">This does not work neither :(</h1>

But only works as expected --my-var. If I use 3 or more words, it breaks. This is the generated CSS (only classes with variables):

.p-\[var\(--only-3-words\)\] {
  padding: var(--only-3 - words);
}

.leading-\[var\(--my-var-for-leading\)\] {
  line-height: var(--my-var-for-leading);
}

.text-\[color\:var\(--my-var\)\] {
  color: var(--my-var);
}

.text-\[color\:var\(--my-var-with-more-than-3-words\)\] {
  color: var(--my-var-with-more-than-3 - words);
}

[onmax]

Same as #8079 (sorry, I didn't look before 🙈 )

[adamwathan]

Haha no problem, going to close in favor of that one!