https://github.com/curiousmarkingsco/tailwindsjs
TailwindSJS is a package for making it simple turn the animated TailwindUI components you purchased into actual animations using Tailwind-like syntax.
https://github.com/curiousmarkingsco/tailwindsjs
javascript tailwindcss tailwindui
Last synced: 3 months ago
JSON representation
TailwindSJS is a package for making it simple turn the animated TailwindUI components you purchased into actual animations using Tailwind-like syntax.
- Host: GitHub
- URL: https://github.com/curiousmarkingsco/tailwindsjs
- Owner: curiousmarkingsco
- License: mit
- Created: 2023-07-07T21:45:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-03T22:20:25.000Z (about 1 year ago)
- Last Synced: 2025-04-05T06:31:58.264Z (6 months ago)
- Topics: javascript, tailwindcss, tailwindui
- Language: JavaScript
- Homepage:
- Size: 121 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TailwindSJS (Simple JavaScript)
TailwindSJS is a package for making it simple turn your TailwindCSS classes into animations based on user interaction. If you are a buyer of [TailwindUI components](https://tailwindui.com/), this is the perfect library to easily get those components animated without pidgeon-holing yourself into their React or Vue samples. Otherwise, this is a way to use Tailwind-y syntax to add JS-powered animations.
## Navigate this README
* [Installation](#installation)
* [Usage](#usage)
* [A more descriptive guide for usage](#tailwindsjs-class-overview)
* [Learn More](#justification)
* [Caveats](#caveats)
* [Contributing](#contributing)
## Installation
From the root of your Node project:
```bash
npm install tailwindsjs
```
Or simply copy/paste the contents of `src/vanilla_code.js` to wherever you deem necessary.
## Usage
STEP 1. [Install](#installation) TailwindSJS as a package **or** copy/paste `src/vanilla_code.js` into your files
STEP 2. Examine this example: Your example component that needs animation:
```html
Use setting
```
STEP 3 to 7. Your component after adding TailwindSJS classes:
```html
Use setting
```
## TailwindSJS Class Overview
#### Unique Identifiers
To prevent unexpected visual bugs, you will need to make a unique identifier to keep your animations scoped to exactly the element you want animated.
When defining our identifier, it is considered best practice to wrap it in square brackets to maintain the visual indication of an arbitrary definition. That way, it is clear to any TailwindCSS developer that the identifier was an arbitrary hand-written value.
Example 1. `group-anim:[happy22]`
Example 1. `group-anim-click:[happy22]`
#### Animation Grouping
##### `group-anim:[unique-identifier]`
`group-anim:` prefix indicates that our element is going to be animated and is part of a group that will be animated upon its triggering. See [Animation Actions](#animation-actions) for how to trigger the animation.
Our hope is to match Tailwind's approach of triggering multiple animations. On Tailwind's hover, for example, it has the `group-` prefix to classes. For example, `group-hover:` See:
[https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state)
#### Animation Actions
##### `group-anim-[action]:[unique-identifier]`
With this class, we are telling our Simple JavaScript what type of interaction triggers the animation. Use this class only once per group and use it on the element that is going to trigger the animation based on user interaction.
Currently supported triggers:
1. click `group-anim-click:`
2. mouseover `group-anim-mouseover:`
3. mouseout `group-anim-mouseout:`
#### Animating to and from different styles
For to/from, we loosely emulate TailwindCSS syntax which can be seen in gradient stops:
[https://tailwindcss.com/docs/gradient-color-stops](https://tailwindcss.com/docs/gradient-color-stops)
##### `from-anim:` and `to-anim:`
In general, virtually all TailwindCSS classes are supported. Example:
```
from-anim:bg-gray-200 to-anim:bg-indigo-600
```
#### Completed Example
```html
Use setting
```
## Justification
The folks at TailwindUI don't want to assume your JS implementation. If you're not super into using Vue or React, this package provides a vanilla JS implementation. Bundle it in your front-end, or simply copy/paste `src/index.js` or `dist/tailwindsjs.js` for a minimized version into your bespoke front-end.
As a happy accident of solving this, it turns out that any TailwindCSS user can benefit from simplifying a wide range JS-related animation needs from their TailwindCSS-powered HTML pages.
## Caveat(s)
* We don't assume your back-end. This is only for making animation implementation easier.
## Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- [Report bugs](https://github.com/curiousmarkingsco/tailwindsjs/issues)
- Fix bugs and [submit pull requests](https://github.com/curiousmarkingsco/tailwindsjs/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features, here's some examples:
- Add animation support for form submission
- Fix Ian's grammar mistakes in this README
- Add documentation for more complex examples
- Add a test suite
For security issues, send an email to the address on [this page](https://github.com/curiousmarkingsco).