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

animate.css as a Tailwind plugin
https://github.com/dumptyd/tailwind-animatecss

animatecss animation animation-css plugin tailwind tailwindcss

Last synced: 9 days ago
JSON representation

animate.css as a Tailwind plugin

• Host: GitHub
• URL: https://github.com/dumptyd/tailwind-animatecss
• Owner: dumptyd
• License: mit
• Created: 2021-12-28T03:09:13.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-01T16:18:49.000Z (almost 3 years ago)
• Last Synced: 2024-10-10T13:08:09.050Z (26 days ago)
• Topics: animatecss, animation, animation-css, plugin, tailwind, tailwindcss
• Language: JavaScript
• Homepage: https://dumptyd.github.io/tailwind-animatecss/
• Size: 125 KB
• Stars: 64
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tailwind-animatecss

Use animate.css as a Tailwind 3 plugin.

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

### Table of contents

- [Installation](#installation)

- [Usage](#usage)

- [Advanced](#advanced)

  - [Changing the prefix](#changing-the-prefix)

  - [How this plugin differs from other implementations](#how-this-plugin-differs-from-other-implementations)

### Installation

```sh

yarn add tailwind-animatecss animate.css

# OR

npm install tailwind-animatecss animate.css

```

Specify the plugin in `tailwind.config.js`

```js

module.exports = {

  // ...

  plugins: [

    require('tailwind-animatecss')

  ],

  // ...

};

```

### Usage

Animations can be applied using `animatecss` prefixed classes:

```html

Bouncy!

Sliding in

Jack in the box

```


---

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`.

```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