Closed as not planned
Description
What version of Tailwind CSS are you using?
v4.0.1
What build tool (or framework if it abstracts the build tool) are you using?
webpack 89.0
What version of Node.js are you using?
For example: v20.18.1
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
Probably just a documentation issue, but can make one if helpful
Describe your issue
My theme is defined in my config.js as follows
{
theme: {
keyframes: {
slideUp: {
from: {opacity: 0, transform: 'translate(-50%, -50%) translateY(32px) scale(0.96)'}
}
},
animation: {
slideUp: 'slideUp 200ms cubic-bezier(0, 0, 0.2, 1)',
}
}
}
My legacy code references it using the name as defined, in camelCase:
<div className='animate-slideUp'></div> // worked in v3. doesn't work in v4!
<div className='animate-slide-up'></div> // works in v4!
I'm OK if this is working as intended, but it was a surprise when all my animations broke.
I suggest documenting it in the upgrade guide & maybe adding the rename codemod to the migrator so it doesn't surprise others.
Thank you so much for what you do ❤
Metadata
Metadata
Assignees
Labels
No labels