How to add animation in tailwind css?

Introduction: Adding animations to your web projects can significantly enhance user interaction and engagement. Tailwind CSS, a utility-first CSS framework, offers a simple yet powerful way to integrate animations into your designs. This article will guide you through using Tailwind’s built-in animations, creating custom ones, and applying them in practical scenarios. So, let’s jump into the animated world of Tailwind CSS!

Getting Started with Tailwind CSS: Before delving deeper, ensure Tailwind CSS is set up in your environment. If you’re new or need a refresher, check out the comprehensive tutorial on installing Tailwind CSS in Visual Studio Code available on our YouTube playlist.

Using Built-in Tailwind CSS Animations: Tailwind comes equipped with a range of ready-to-use animations, such as:

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

To use these animations, add the relevant class to your HTML element. For instance:

<div class="animate-spin">...</div>

This snippet will apply a spinning animation to the div element.

Creating Custom Animations: Tailwind allows you to define your animations by specifying keyframes in the tailwind.config.js file. Here's a basic example of creating a wiggle animation:

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

Then, you can apply this custom animation to an element in your HTML:

<div class="animate-wiggle">...</div>

Practical Use Cases: Animations can be particularly useful in scenarios like creating a loading spinner. You could use Tailwind’s animate-spin class to achieve this. Here's a simple implementation:

<svg class="animate-spin h-5 w-5 mr-3 ...">...</svg>

Moreover, animations can be interactive. For example, you could have an element that animates on hover: