Part 49: Custom Keyframe Animations in Configuration

When default animations aren't enough, you can declare custom @keyframes directly in tailwind.config.js.

1. Configuring Keyframes in tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        fadeIn: 'fadeIn 0.4s ease-out forwards',
      }
    }
  }
}

2. Using the Custom Utilities

<div class="animate-fadeIn p-6 bg-white rounded-xl shadow">
  Smooth Fade In Content
</div>

<button class="animate-wiggle px-4 py-2 bg-yellow-400 text-black font-bold rounded">
  Attention Grabber
</button>

Key Takeaways

• Define custom @keyframes in theme.extend.keyframes.
• Register the utility under theme.extend.animation.

In Part 50, we will explore Micro-Interactions: Modals, Toasts & Action Triggers!