Workaround Chrome rendering bug for skew-* utilities

[philipp-spiess]

Closes #17621

Chrome as a pretty ugly rendering glitch when using a skew-* utility in Tailwind 4: https://play.tailwindcss.com/HuiZtbrHOc

The was not an issue in v3 since transforms were set up in a different way. Without the var(…) syntax, the difference boils down to this:

.skew-v3 {
  transform: rotate(0) skewX(-20deg);
}

.skew-v4 {
  transform: rotateX(0) rotateY(0) rotateZ(0) skewX(-20deg);
}

It appears that using any of the single-dimension rotate functions will cause the Chrome rendering to glitch.

After doing some digging, we found that initially these @propertys were defined as type <transform-function> and later changed to *. With a type of *, it makes sense that the initial value of these variables can default to initial without any compromises, allowing us to default to something like this now:

.skew-new {
  transform: skewX(-20deg);
}

Tested this change in the latest version of Chrome (135) and it does make the rendering glitch in the initial issue disappear. By using the var(--tw-rotate-x,) syntax we also ensure this works on older versions of Safari (tested on Safari 15.5 and 16.4).

Note, however, that there are still glitches happening when you combine rotate and skew in the latest version of Chrome or when you transition the skew(…) variable. This also happens in plain CSS with no variables though, so there isn't something we can do about this: https://play.tailwindcss.com/g3FXPEJHpn

Test plan

• Tested on latest Chrome, Firefox, and Safari as well as Safari 15.5 and 16.4.