Arbitrary calc values with mixed units not working for translate-* and -translate-* in 4.0.0-beta.2

[andmoreduro]

What version of Tailwind CSS are you using?

v4.0.0-beta.2

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

vite 5.4.10

What version of Node.js are you using?

v23.2.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/7XtFHjJECp

Describe your issue

When using arbitrary values for translate-* and -translate-*, operations in calc() that involve multiple units (e.g., calc(50%+0.75rem)) are not applied correctly or not at all.

[justin06coston]

This issue highlights the fine balance between using utility-first CSS frameworks like Tailwind and the dynamic nature of modern CSS with tools like calc(). It’s fascinating to see how even small syntax variations—like spacing or character escaping—can have such a big impact on functionality. It also shows the versatility of Tailwind CSS, where complex operations can be managed creatively through arbitrary values or @apply. This challenge is a reminder that as developers, we sometimes have to blend utility-based approaches with custom CSS to get the best of both worlds. EdFinancial

[wongjn]

Dupe of #14277