Arbitrary values for 'radial-gradient' generate incorrect CSS

[Kinbaum]

What version of Tailwind CSS are you using?

3.4.0

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

Next.js 14.0.4

What version of Node.js are you using?

18.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/wORjugi1Xl

Describe your issue

This is similar to #12654 and #12281 using arbitrary background values with multiple radial gradients.

Here is the input

<div class="w-screen h-screen bg-[radial-gradient(ellipse_539px_673px_at_calc(50vw_-_539px)_0px,red_0px,transparent_70dvh),radial-gradient(circle_at_calc(50vw_+_539px)_100dvh,blue_0%,transparent_75dvh)]">
  Test
</div>

Here is the generated output CSS

.bg-\[radial-gradient\(ellipse_539px_673px_at_calc\(50vw_-_539px\)_0px\2c red_0px\2c transparent_70dvh\)\2c radial-gradient\(circle_at_calc\(50vw_\+_539px\)_100dvh\2c blue_0\%\2c transparent_75dvh\)\] {
    background-image: 
radial-gradient(ellipse 539px 673px at calc(50vw - 539px) 0px,red 0px,transparent 70dvh),
radial - gradient(circle at calc(50vw + 539px) 100dvh,blue 0%,transparent 75dvh);
}

Notice the second radial-gradient is generated as radial - gradient with spaces.

The correct CSS should be

.bg-\[radial-gradient\(ellipse_539px_673px_at_calc\(50vw_-_539px\)_0px\2c red_0px\2c transparent_70dvh\)\2c radial-gradient\(circle_at_calc\(50vw_\+_539px\)_100dvh\2c blue_0\%\2c transparent_75dvh\)\] {
    background-image: 
radial-gradient(ellipse 539px 673px at calc(50vw - 539px) 0px,red 0px,transparent 70dvh),
radial-gradient(circle at calc(50vw + 539px) 100dvh,blue 0%,transparent 75dvh);
}

[adamwathan]

Here's an even more minimal reproduction for when we get a chance to look at this properly:

https://play.tailwindcss.com/WgsZXMdp0Y

Culprit seems to be the presence of calc in the first gradient — without that the second radial-gradient has no spaces like expected.

[thecrypticace]

This should be fixed by #12704, and will be available in the next release.

You can try it before then by using our insiders build — which should be ready in ~15m:

npm install tailwindcss@insiders

[Kinbaum]

The worked for me. Thanks!