Regression: Tailwind producing invalid CSS for arbitrary values with arithmetic operators

[dcastil]

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:

.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, but not for calc().

In Tailwind CSS v3.0.24 the CSS produced was correct:

.w-\[min\(50vw\+100px\)\] {
    width: min(50vw + 100px);
}

[dcastil]

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.