Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Regression: Tailwind producing invalid CSS for arbitrary values with arithmetic operators
<!-- 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?**

v3.1.2 and v3.1.1

**What build tool (or framework if it abstracts the build tool) are you using?**

Tailwind Play

**What version of Node.js are you using?**

Not applicable

**What browser are you using?**

Chrome 102 and Safari 15.5

**What operating system are you using?**

macOS 12.4

**Reproduction URL**

https://play.tailwindcss.com/Y4DN00mQfb

**Describe your issue**

The class `w-[min(50vw+100px)]` produces following CSS in Tailwind CSS v3.1.1 and v3.1.2:

```css
.w-\[min\(50vw\+100px\)\] {
    width: min(50vw+100px);
}
```

which is perceived as invalid in both Chrome and Safari due to the missing space around the `+` operator and therefore not applied. Same happens for `max()` and the other [math functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions), but not for `calc()`.

In Tailwind CSS v3.0.24 the CSS produced was correct:

```css
.w-\[min\(50vw\+100px\)\] {
    width: min(50vw + 100px);
}
```


Hints:
Current workarounds in Tailwind v3.1.1 and above:
- Wrapping arithmetic operations in a `calc()` call: `w-[min(calc(50vw+100px))]`
- Using `_` to insert spaces: `w-[min(50vw_+_100px)]`

Both not ideal in the long term.

Patch:
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -40,9 +40,9 @@ export function normalize(value, isRoot = true) {
     value = value.trim()
   }
 
-  // Add spaces around operators inside calc() that do not follow an operator
+  // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
-  value = value.replace(/calc\(.+\)/g, (match) => {
+  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     return match.replace(
       /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
       '$1 $2 '


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
@@ -20,7 +20,7 @@ let table = [
   ['var(--foo)', 'var(--foo)'],
   ['var(--headings-h1-size)', 'var(--headings-h1-size)'],
 
-  // calc(…) get's spaces around operators
+  // math functions like calc(…) get spaces around operators
   ['calc(1+2)', 'calc(1 + 2)'],
   ['calc(100%+1rem)', 'calc(100% + 1rem)'],
   ['calc(1+calc(100%-20px))', 'calc(1 + calc(100% - 20px))'],
@@ -29,6 +29,9 @@ let table = [
     'calc(var(--headings-h1-size)*calc(100%+50%))',
     'calc(var(--headings-h1-size) * calc(100% + 50%))',
   ],
+  ['min(1+2)', 'min(1 + 2)'],
+  ['max(1+2)', 'max(1 + 2)'],
+  ['clamp(1+2,1+3,1+4)', 'clamp(1 + 2,1 + 3,1 + 4)'],
   ['var(--heading-h1-font-size)', 'var(--heading-h1-font-size)'],
   ['var(--my-var-with-more-than-3-words)', 'var(--my-var-with-more-than-3-words)'],
   ['var(--width, calc(100%+1rem))', 'var(--width, calc(100% + 1rem))'],