Tailwindcss custom animation not working in Next.js

Question

I'm trying to create a custom animation in Next.js with tailwindcss but not working, I'm following the docs but no luck

link: https://tailwindcss.com/docs/animation#customizing-your-theme

• Next.js v15.1.4
• Tailwindcss: v3.4.1

Component

note: the builtin tailwind animation working but the custom one doesn't

import '@/app/globals.css';

const SomeComponent: React.FC = () => {
  return (
    <>
      <p className={'animate-bounce'}> This is animated with builtin tailwind utility </p>
      <p className={'animate-wiggle'}> This should be animated </p>
    </>
  );
};

export default SomeComponent;

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;
  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}

The 'ugly' solution it to duct tape it with vanilla css but come on tailwind you can do it :)

Answer 1

You're trying to use v4 configuration syntax but you are using Tailwind v3. So, as per the v3 docs, you should apply the following in your tailwind.config.js file:

module.exports = {
  // …
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
};