how to define multiple custom animations with tailwind v4

I am using tailwind v4 with nextjs 15.0.4

In globals.css I have.

@theme {
  --animate-float: float 4s  inifinite
  --animate-wiggle: wiggle 1s infinite
  

  @keyFrames[ wiggle {
    0% { 
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(3deg);
    }
  },

  @keyFrames float {
    0%  { 
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
    }
  }]
  
}

in ShoeDetail.tsx is have

<Image className="animate-wiggle" src={nike1} width={600} height={500} alt="Picture of shoe"/>

There is only one animation shown in the available list, and the animation does not have any effect. The built-in animate-pulse works fine.

I have followed the tailwind guide and cannot seewhat is wrong.

Thanks

Answer

Problems

Specifically in your case, the CSS is invalid:

@keyFrames[ wiggle {

And the semicolons are also missing:

--animate-float: float 4s  inifinite
--animate-wiggle: wiggle 1s infinite

And the import of TailwindCSS v4 is missing.

Solution

First, you need to import TailwindCSS v4, and second, CSS is case-sensitive, so it's best to use the original @keyframes instead of @keyFrames; this is what it should look like correctly:

@import "tailwindcss";                  /* added import */

@theme {
  --animate-float: float 4s infinite;   /* added semicolon */
  --animate-wiggle: wiggle 1s infinite; /* added semicolon */

  @keyframes wiggle {                   /* fixed syntax; use @keyframes */
    0% {
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(3deg);
    }
  }

  @keyframes float {                    /* use @keyframes */
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
    }
  }
}

• Read more - StackOverflow