Skip to content

Animations don't work with prefix #16829

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

Closed
marcorieser opened this issue Feb 26, 2025 · 2 comments · Fixed by #16850
Closed

Animations don't work with prefix #16829

marcorieser opened this issue Feb 26, 2025 · 2 comments · Fixed by #16850

Comments

@marcorieser
Copy link

marcorieser commented Feb 26, 2025

What version of Tailwind CSS are you using?

v4.0.9

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

Vite 6.1.0

What version of Node.js are you using?

v20.18.3

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL
Not working (with prefix): https://play.tailwindcss.com/qTUjgxKQEu
Working (without prefix): https://play.tailwindcss.com/n1FLqahYjR

Describe your issue

Prebuilt animations like animate-spin (https://tailwindcss.com/docs/animation) and custom animations don't work when a prefix is used.

@philipp-spiess
Copy link
Member

Oh, thanks for the repro! Seems like the @keyframes is not emitted here, we'll look into it.

philipp-spiess added a commit that referenced this issue Feb 27, 2025
Closes #16829

We were only adding keyframes used in variables starting with
`--animate` (without adding a potential prefix).

## Test plan

- Added a unit test
@philipp-spiess
Copy link
Member

Will be fixed in the next patch release, thank you!

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

Successfully merging a pull request may close this issue.

2 participants