Description
What version of Tailwind CSS are you using?
v4.0.3
What build tool (or framework if it abstracts the build tool) are you using?
Vite 6.0.5
What version of Node.js are you using?
v18.18.2
What browser are you using?
Chrome
What operating system are you using?
WSL
Reproduction URL
https://play.tailwindcss.com/hmN4T4wuta
Describe your issue
Hi! I'm writing a React component library that styles Joy UI components the Tailwind CSS way.
Since the existing library was written to integrate with Tailwind CSS v3, I felt the need to guide how to integrate with v4, but I found some inconsistencies in the CSS build results, so I'm reporting the issue.
Please check the generated utility class in the attached playground link.
The first two classes (h-[var(--\_root-size)] and text-[calc(0.2*var(--\_root-size))]) both use var(--\_root-size) as an arbitrary value, but in the build output one refers to --\_root-size, while the other refers to --_root-size.
When I first noticed this difference, I suspected it had to do with the presence of calc, but in the case of the third class, the backslash remains even though calc and var are nested, unlike in the second class.
The last class is a bit more unusual, as even the two --\_LinearProgress-paddings written within one class differ in the presence or absence of backslashes in the build output.
It would be nice if the presence or absence of backslashes were consistent in build results.