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 :)

Wongjn · Accepted Answer · 2025-01-26 09:55:07Z

2

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

answered Jan 26 at 9:55

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rozsazoltan Jan 26 at 11:30

Or they can update the version they're using to v4: tailwindcss.com/docs/upgrade-guide

Collectives™ on Stack Overflow

Tailwindcss custom animation not working in Next.js

Component

globals.css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Component

globals.css

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related