how to define multiple custom animations with TailwindCSS v4

Question

I am using TailwindCSS v4 with Next.js v15.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.

This question is similar to: How to use @keyframes in Tailwind CSS version 4?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — rozsazoltan
– rozsazoltan, Commented Apr 12 at 7:31

rozsazoltan · Accepted Answer · 2025-04-12 07:38:42Z

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);
    }
  }
}

How to use @keyframes in Tailwind CSS version 4? - StackOverflow

Collectives™ on Stack Overflow

how to define multiple custom animations with TailwindCSS v4

1 Answer 1

Problems

Solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Problems

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related