No way to use the old transform syntax

[sntran]

What version of Tailwind CSS are you using?

tailwindcss v4.0.0-alpha.20

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

@tailwindcss/cli v4.0.0-alpha.20

What version of Node.js are you using?

v20.12.2

What browser are you using?

Chrome version 128.0.6613.85 (Official Build) (arm64)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/yocdck2wZU

Describe your issue

Tailwind v4 switch from the single transform style that composes of various properties for translate, scale, etc.. to individual translate and scale. While this is great, it makes it hard to calculate the transformation matrix. We have some elements that transform when scrolled to. They can be sliding from a side, or scaling up, etc... To detect when the element appears on screen, we depend on its bounding rectangle. However, with transformation, such bounding changes on animation.

We can adjust for that using the computed transform style. Unfortunately, it has value none when used with Tailwind v4. We can use computed translate and scale styles, but because animations can be arbitrary, it's hard to calculate the final transform from those.

Would there be a way to explicitly tell Tailwind v4 to use transform instead?

[Marlene495Hadley]

Hello! You’re facing issues with Tailwind CSS v4’s individual transform properties, which complicate calculating the transformation matrix for animated elements. To fix this, you can:

Use custom CSS to apply the transform property directly. Use JavaScript to compute and apply the transformation matrix. Create a Tailwind plugin to revert to using the transform property. For example, you can add custom CSS like this:

CSS

.custom-transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) scale(var(--tw-scale-x), var(--tw-scale-y)); } Apply this class to your elements as needed. TellTheBell