Skip to content

v4 Regression: Keyframe animations defined in JS must be referred to using kebab case, even if defined in camelCase #16092

Closed as not planned
@mattkrick

Description

@mattkrick

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
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions