negative rotate with variables (-rotate-(--foo)) not working correctly

[whytspace]

What version of Tailwind CSS are you using?

v4.1.6

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

Vite 6.3.5

What version of Node.js are you using?

For example: v20.10.0

What browser are you using?

N.A.

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/XIDXFoclli

Describe your issue

the negative rotate does not work with the new variable syntax (-rotate-(--myvar))). It generated the same code as the positive variant rotate-(--myvar)).

Example:

• ✅ rotate-20 generates rotate: 20deg;
• ✅ -rotate-20 generates rotate: -20deg;
• ✅ rotate-(--myvar) generates rotate: var(--myvar);
• ❌ -rotate-(--myvar) generates rotate: var(--myvar);, but should generate rotate: calc(var(--myvar) * -1);

Is that a bug or intentional behaviour?

Side note:

-rotate-z-(--myvar) works as expected. I will use it as a workaround for now.
However it does not use rotate, but transform: rotate() instead. Is there a reason for this difference? Just asking because translate-* and translate-x-* both use the new translate property instead of transform.

[philipp-spiess]

Thanks! Will be fixed with the next release 👍