What version of Tailwind CSS are you using?

V4.2.4

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

vite@8.0.10

What version of Node.js are you using?

Node: 22.17.0

What browser are you using?

N.A

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/kWykjkxkSj

Description

I've found a bug with canonicalization logic when the calc contains a multiplication by minus 1.

In the reproduction, you can find this class:

left-[calc(-1*(var(--my-var1)+var(--my-var2)))]"

Which translates to the following CSS:

    left: calc(-1 * (var(--my-var1) + var(--my-var2)));

Using the canonical class as suggested by the eslint-plugin-better-tailwindcss, we get the following class:

-left-[(var(--my-var1)+var(--my-var2))]

Which translates to the following CSS:

calc((var(--my-var1)+var(--my-var2)) * -1)

While it looks similar, the missing white space around the "+" breaks the calculation.

This canonicalization does not happen for calculations where it's not multiply by -1.

I've tried filing this issue with the eslint-plugin-better-tailwindcss repo, but they've informed me that the canonicalization logic lives in tailwind, and the plugin only calls Tailwind internal functions.