# tailwind-animatecss

> animate.css as a Tailwind plugin

Latest version **1.0.0** (published 2021-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-animatecss
pnpm add tailwind-animatecss
yarn add tailwind-animatecss
bun add tailwind-animatecss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-12-28 |
| First published | 2021-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dumptyd |
| Maintainers | dumptyd |

## Links

- npm: https://www.npmjs.com/package/tailwind-animatecss
- Repository: https://github.com/dumptyd/tailwind-animatecss
- Homepage: https://dumptyd.github.io/tailwind-animatecss/
- Issues: https://github.com/dumptyd/tailwind-animatecss/issues
- npm.io page: https://npm.io/package/tailwind-animatecss

## Dependencies (2)

- [postcss-js](https://npm.io/package/postcss-js.md) ^3.0.3
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.0.8

## Recent versions

- 1.0.0 (latest) — 2021-12-28
- 0.1.1 — 2021-12-28
- 0.1.0 — 2021-12-28

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

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

---
_Source: https://npm.io/package/tailwind-animatecss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._