Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Arbitrary values for 'radial-gradient' generate incorrect CSS
<!-- 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?**

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

```html
<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

```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 

```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);
}
```


Hints:
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.

Patch:
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -107,6 +107,13 @@ function normalizeMathOperatorSpacing(value) {
     'keyboard-inset-left',
     'keyboard-inset-width',
     'keyboard-inset-height',
+
+    'radial-gradient',
+    'linear-gradient',
+    'conic-gradient',
+    'repeating-radial-gradient',
+    'repeating-linear-gradient',
+    'repeating-conic-gradient',
   ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
@@ -162,6 +169,11 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')'])
       }
 
+      // Don't break CSS grid track names
+      else if (peek('[')) {
+        result += consumeUntil([']'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&


Test patch:
diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -86,6 +86,16 @@ let table = [
   // Prevent formatting keywords
   ['minmax(min-content,25%)', 'minmax(min-content,25%)'],
 
+  // Prevent formatting keywords
+  [
+    'radial-gradient(calc(1+2)),radial-gradient(calc(1+2))',
+    'radial-gradient(calc(1 + 2)),radial-gradient(calc(1 + 2))',
+  ],
+  [
+    '[content-start]_calc(100%-1px)_[content-end]_minmax(1rem,1fr)',
+    '[content-start] calc(100% - 1px) [content-end] minmax(1rem,1fr)',
+  ],
+
   // Misc
   ['color(0_0_0/1.0)', 'color(0 0 0/1.0)'],
   ['color(0_0_0_/_1.0)', 'color(0 0 0 / 1.0)'],