Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No way to use the old transform syntax #14336

Open
sntran opened this issue Sep 4, 2024 · 1 comment
Open

No way to use the old transform syntax #14336

sntran opened this issue Sep 4, 2024 · 1 comment

Comments

@sntran
Copy link

sntran commented Sep 4, 2024

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

This comment was marked as spam.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@sntran @Marlene495Hadley and others