next.jstailwind-csstailwind-css-4

how to define multiple custom animations with TailwindCSS v4

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.

Solution

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