Using Animate.css with Tailwind CSS

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/tailwindcss

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • animated-tailwindcss

    A configuration to use Animate.css with Tailwind CSS.

    I am excited that recently I released its version 3 that is fully compatible with Tailwind CSS v3. One can read the docs here. The package provides utilities to customize all the animation-related properties. Most of the utilities support arbitrary values too. I have also added all the CSS-compatible animation timing functions there are at easings.net. For some animations, you can also customize their translating distance (for example, in case you want subtle entrance/exit). The package is open-source and MIT licensed (GitHub). Please try using the configuration. Any feedback is much appreciated.

  • tailwindcss-animate.css

    Animate CSS plugin for Tailwind CSS

    So, I thought of writing some plugin-like stuff that adds Animate.css animations and the necessary animation utilities to make things easier. There wasn't any specific reason to choose Animate.css over other libraries. It was just a thought that let's start with the most popular one, then add the others later. Firstly I started searching if any similar package exists or not. There is tailwindcss-animatecss but it requires way too much configuration for JIT mode. There wasn't much activity on its repository, so instead of contributing to it, I started working on a package of my own - animated-tailwindcss.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support. Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • easings.net

    Easing Functions Cheat Sheet

    I am excited that recently I released its version 3 that is fully compatible with Tailwind CSS v3. One can read the docs here. The package provides utilities to customize all the animation-related properties. Most of the utilities support arbitrary values too. I have also added all the CSS-compatible animation timing functions there are at easings.net. For some animations, you can also customize their translating distance (for example, in case you want subtle entrance/exit). The package is open-source and MIT licensed (GitHub). Please try using the configuration. Any feedback is much appreciated.

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