Using Animate.css with Tailwind CSS

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

InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • 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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • 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

  • DaisyUI + Alpine.js + Codehooks.io - the simple web app trio

    2 projects | dev.to | 13 Jan 2024
  • How long have you been at it and how many clients do you have?

    2 projects | /r/codestitch | 8 Dec 2023
  • Connecting Alpine.js to a Database REST API: A Simple Guide

    3 projects | dev.to | 18 Nov 2023
  • How to style components according to global theme?

    2 projects | /r/sveltejs | 2 Apr 2023
  • How to learn bootstrap(CSS framework)?

    2 projects | news.ycombinator.com | 23 Dec 2022