animate.css as a Tailwind plugin

Saad

Last update: Dec 19, 2022

Overview

tailwind-animatecss

Use animate.css as a Tailwind 3 plugin.

Demo – https://dumptyd.github.io/tailwind-animatecss

Installation
Usage
Advanced
- Changing the prefix
- How this plugin differs from other implementations

Installation

yarn add tailwind-animatecss animate.css
# OR
npm install tailwind-animatecss animate.css

Specify the plugin in tailwind.config.js

module.exports = {
  // ...
  plugins: [
    require('tailwind-animatecss')
  ],
  // ...
};

Usage

Animations can be applied using animatecss prefixed classes:

<h1 class="animatecss animatecss-bounce">Bouncy!</h1>
<h1 class="animatecss animatecss-slideInDown">Sliding in</h1>
<h1 class="animatecss animatecss-jackInTheBox">Jack in the box</h1>

All animate.css classes are modified to use the animatecss class name and prefix to avoid conflicts with Tailwind's animations. The table below should give you an idea of how the classes are mapped to the prefix.

animate.css	tailwind-animatecss
`animate__animated`	`animatecss`
`animate__fadeIn`	`animatecss-fadeIn`
`animate__infinite`	`animatecss-infinite`
`animate__repeat-2`	`animatecss-repeat-2`
`animate__delay-2s`	`animatecss-delay-2s`
`animate__fast`	`animatecss-fast`
	... and so on

Advanced

Changing the prefix

By default, animatecss is used as the base class name and prefix for classes. This can be changed by specifying the theme.animatecss.prefix option in tailwind.config.js.

module.exports = {
  // ...
  theme: {
    animatecss: {
      prefix: 'custom-animation'
    }
  }
  // ...
};
// class names will now be available under
// `custom-animation`, `custom-animation-bounce`, `custom-animation-infinite` and so on.

How this plugin differs from other implementations

Unlike other projects, this plugin doesn't implement the animations through a rewrite of the animate.css utilities.

Instead, classes, keyframes and styles are read from your installed version of animate.css at compile time and these are registered with Tailwind so the animations can be used with purging support, IntelliSense and other Tailwind goodness.

Contributing

https://github.com/dumptyd/tailwind-animatecss/issues

License

MIT

Javascript library to animate images on hover.

Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo

Nov 21, 2022

Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.

Write and Delete Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more

Nov 15, 2022

The easiest way to animate your Next.js project. Scrollreveal.js helper package.

next-reveal The easiest way to animate your Next.js app Demo Introduction next-reveal makes it easy to add awesome scroll animations to your Next.js p

Nov 25, 2022

Alpine.js wrapper for @formkit/auto-animate.

💫 Alpine AutoAnimate 💫 An Alpine.js wrapper for @formkit/auto-animate. 🚀 Installation CDN Include the following script tag in the head of your

Dec 28, 2022

♦ Crowd funding project using Smart Contracts on the Ethereum. Created with Next.js and Tailwind CSS.

Crowdcoin ♦ Crowd funding project using Smart Contracts on the Ethereum. Created with Next.js and Tailwind CSS. Project from "Ethereum and Solidity: T

Dec 14, 2022

Personal developer portfolio written with NextJS and Tailwind CSS.

Developer Portfolio This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature rich nextjs markdown blogging template out th

Dec 20, 2021

The 2048 game built with Angular & Tailwind CSS

Ng2048 This project was generated with Angular CLI version 13.1.2. Development server Run ng serve for a dev server. Navigate to http://localhost:4200

Mar 10, 2022

🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

Dec 28, 2022

Explore movies, tv shows. Built with Next.js, Tailwind CSS, Redux, Firebase, TypeScript, TMDB v3 API.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dec 4, 2022

Comments

Does not work with Nextjs

When trying to use this module on a Nextjs application it fails with the following error:

error - ./node_modules/.pnpm/[email protected]_09fd6390c35d3a8fd7ec9f7f97366738/node_modules/tailwind-animatecss/plugin.js:2:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./tailwind.config.js
./helpers/css.js
./components/fullImageSection.jsx
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
Native Node.js APIs are not supported in the Edge Runtime. Found `fs` imported.

opened by Aex12 0