How to create Custom Animations in Tailwind?

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        fadeIn: 'fadeIn 0.5s ease-out',
        slideUp: 'slideUp 0.3s ease-out',
      },
    },
  },
}

<div class="animate-wiggle">Wiggling element</div>
<div class="animate-fadeIn">Fading in</div>
<div class="animate-slideUp">Sliding up</div>

<!-- Duration -->
<div class="animate-spin duration-1000">

<!-- Delay -->
<div class="animate-bounce delay-300">

<!-- Iteration -->
<div class="animate-ping animate-once">

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  Inline animation
</div>