https://github.com/brc-dd/animated-tailwindcss

A configuration to use Animate.css with Tailwind CSS.
https://github.com/brc-dd/animated-tailwindcss

animate-css hacktoberfest plugin tailwindcss

Last synced: 6 days ago
JSON representation

A configuration to use Animate.css with Tailwind CSS.

• Host: GitHub
• URL: https://github.com/brc-dd/animated-tailwindcss
• Owner: brc-dd
• License: mit
• Created: 2021-06-06T08:44:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-01T03:37:19.000Z (12 months ago)
• Last Synced: 2024-05-01T17:32:15.579Z (9 months ago)
• Topics: animate-css, hacktoberfest, plugin, tailwindcss
• Language: TypeScript
• Homepage: https://brc-dd.github.io/animated-tailwindcss
• Size: 553 MB
• Stars: 152
• Watchers: 1
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• my-awesome-list - animated-tailwindcss - dd | 156 | (TypeScript)

README

        



  

    

      

      

    

  

  


  


  A configuration to use Animate.css with

  Tailwind CSS.

  


  


  

    

  

  

    

  

  

    

  

  

    

  

  


  

    

  

  

    

  

  

    

  



---

## Documentation

[View documentation](https://brc-dd.github.io/animated-tailwindcss/)

## Installation

Please see the [full installation instructions](https://brc-dd.github.io/animated-tailwindcss/installation) for detailed steps and examples.

### Quick start with NPM

In a project where you're using Tailwind CSS **v3**, run this to install this

package:

```sh

npm add -D animated-tailwindcss

```

Then configure your `tailwind.config.js` to use the animations:

```js

const { withAnimations } = require('animated-tailwindcss')

module.exports = withAnimations({

  // your (existing) Tailwind CSS config here

})

```

## Credits

- [Animate.css](https://github.com/animate-css/animate.css) – for

  animation utilities & keyframes – used under

  [the MIT license](https://cdn.jsdelivr.net/npm/[email protected]/LICENSE).

- [Transform.tools](https://github.com/ritz078/transform) – for converting

  Animate.css to JS – used under

  [the MIT license](https://github.com/ritz078/transform/blob/master/LICENSE).