Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Arbituray Value using Clamp() doesn't work if there is a negative 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?**
v3.3.3

**What build tool (or framework if it abstracts the build tool) are you using?**
postcss 8.4.31, postcss-cli 10.1.0, webpack 5.89.0

**What version of Node.js are you using?**
v16.14.0

**What browser are you using?**
Chrome 118.0.5993.118

**What operating system are you using?**
Windows 10

**Reproduction URL**
Can't provide URL of the project. But it can be replicated on TailwindPlay
https://play.tailwindcss.com/BuKHeMD2uv
on Line 18 mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)]

I'm Using this [Font-size Clamp Generator](https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjM2MHB4IiwibWF4V2lkdGgiOiIxOTIwcHgiLCJtaW5Gb250U2l6ZSI6IjRweCIsIm1heEZvbnRTaXplIjoiNjhweCJ9).
Screenshot of Configuration: https://snipboard.io/zXFA3o.jpg

**Describe your issue**
mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)]
It add space to "-"
Screenshot: https://snipboard.io/SEMTQZ.jpg




Hints:
Hey @rexsoi!

I noticed that the example you shared contains incorrect CSS. If you want to perform computations within the `clamp` function, wrap it with `calc`:
`mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)]` => `mt-[clamp(0.25rem,calc(-0.6731rem+4.1026vw),4.25rem)]`
@alex-krasikau Nah, that's not true (it may have been in the past though? — I don't recall). Any math function in CSS supports expressions. Though, you _can_ use `calc()` as a workaround for the errant space.

Ex: https://play.tailwindcss.com/zohf7KMMmg

Patch:
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -78,7 +78,7 @@ export function normalize(value, context = null, isRoot = true) {
 
 /**
  * Add spaces around operators inside math functions
- * like calc() that do not follow an operator or '('.
+ * like calc() that do not follow an operator, '(', or `,`.
  *
  * @param {string} value
  * @returns {string}
@@ -165,7 +165,7 @@ function normalizeMathOperatorSpacing(value) {
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&
-        !['(', '+', '-', '*', '/'].includes(lastChar())
+        !['(', '+', '-', '*', '/', ','].includes(lastChar())
       ) {
         result += ` ${char} `
       } else {


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
@@ -68,6 +68,9 @@ let table = [
   ['calc(theme(spacing.foo-2))', 'calc(theme(spacing.foo-2))'],
   ['calc(theme(spacing.foo-bar))', 'calc(theme(spacing.foo-bar))'],
 
+  // A negative number immediately after a `,` should not have spaces inserted
+  ['clamp(-3px+4px,-3px+4px,-3px+4px)', 'clamp(-3px + 4px,-3px + 4px,-3px + 4px)'],
+
   // Prevent formatting inside `var()` functions
   ['calc(var(--foo-bar-bar)*2)', 'calc(var(--foo-bar-bar) * 2)'],