Animate.css with Tailwind CSS

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • animate.css

    🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

    If you have used Tailwind CSS, you might have noticed that it lacks proper animation utilities. It has only four animations by default - spin, ping, pulse, and bounce. This limitation makes us search for other methods and additional frameworks to animate the components. The most common one is Animate.css if you don't want to write all the keyframes yourself.

  • tailwindcss-animate.css

    Animate CSS plugin for Tailwind CSS

    The question will probably make you search for some plugin, and the first one on the list will be tailwindcss-animatecss. It is a great plugin in itself, except it requires quite a configuration. Although its adjustable (optional) settings are pretty nice, but setting the variants and required classes seems overkill in the new JIT mode.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • animated-tailwindcss

    A configuration to use Animate.css with Tailwind CSS.

    Please give the configuration a try. If you feel that something went wrong, please comment and/or create an issue on GitHub. I am working on adding options to customize animation duration, delay, etc. These will be available soon!

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    If you have used Tailwind CSS, you might have noticed that it lacks proper animation utilities. It has only four animations by default - spin, ping, pulse, and bounce. This limitation makes us search for other methods and additional frameworks to animate the components. The most common one is Animate.css if you don't want to write all the keyframes yourself.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts