------
## Demo
To view 20+ examples of TAOS in action go to [versoly.com/taos](https://versoly.com/taos).
## Getting started
TAOS can be included as a plugin into an existing Tailwind CSS project and will allow you to add responsive Tailwind CSS utility classes for animation on scroll.
## Installation
### Install Tailwind Plugin
Install TAOS package
```js
npm install taos --save
```
Add plugin in `tailwind.config.js`
```js
module.exports = {
plugins: [
require('taos/plugin')
],
}
```
Add safelist utilties `tailwind.config.js`
```js
module.exports = {
safelist: [
'!duration-[0ms]',
'!delay-[0ms]',
'html.js :where([class*="taos:"]:not(.taos-init))'
]
}
```
Add content transform in `tailwind.config.js`
```js
module.exports = {
content: {
relative: true,
transform: (content) => content.replace(/taos:/g, ''),
files: ['./src/*.{html,js}'],
},
}
```
### Add JavaScript scripts
Add script in ``
```html
```
Add the CDN script or download and paste right before the closing `` tag
```html
```
## TAOS Frequently Asked Questions
### Does TAOS work with React/Vue/JS frameworks
TAOS does not currently work with JS frameworks as they rerender, disable certain event listeners.
Support for them is on the road map.
## 💡 Inspiration
- [AOS](https://github.com/michalsnik/aos): is a great library and works by using custom classes such as aos-animate to animate elements.
- [Tailwind](https://tailwindcss.com/): created an easy to use utility library that is easily extendable and flexible. Their variant and just in time compiler changed the game for developers.
## Community
If you need help or just want to discuss about the library join the community on Github:
[Discuss about Versoly on GitHub](https://github.com/versoly/taos/discussions)
For casual chatting with others using the library:
[Join the Versoly Discord Server](https://discord.versoly.com)
