TailwindCSS Animations

Tailwind CSS version 1.6 was released last week. This new version does not introduce any new breaking changes, and it gives us some awesome animation utility classes.

Animation Classes

There are four default animations with the ability to create more. The four default animations provided in version 1.6 are:

1. .animate-spin
2. .animate-ping
3. .animate-pulse
4. .animate-bounce

You can also utilize the .animate-none to prevent an animation from running at a specific resolution. Take a look at the following codepen for a quick example of each animation:

As you can see, creating animations with TailwindCSS is now super easy!

Customizing Animations

In the Tailwind documentation, it claims that these 4 animations are meant to be used as helpers to build your own. You can easily customize these 4 animations by extending the animation in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

Now, you can use the following class .animate-spin-slow.

Custom Animations

You will probably want to add your own animations to your application, and this can easily be accomplished by extending the keyframes key inside of your tailwind.config.js file, like so:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'wiggle': {
        '0%, 100%': { transform: 'rotate(-3deg)' },
        '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

After adding your own keyframes to the Tailwind config, you can now create an animation using these keyframes:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'wiggle': 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

And you will now have a nice wiggle animation class that can be used by adding the class animate-wiggle.

Conclusion

Be sure to check out the official post on the TailwindCSS blog to learn more about this release.

You may also want to check out the documentation on creating and customizing animations over at the official TailwindCSS docs.

There, you have it! Simple animations in TailwindCSS.