https://github.com/rombohq/tailwindcss-motion
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
https://github.com/rombohq/tailwindcss-motion
animate animation css design motion preset tailwindcss tailwindcss-plugin
Last synced: 28 days ago
JSON representation
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
- Host: GitHub
- URL: https://github.com/rombohq/tailwindcss-motion
- Owner: romboHQ
- License: mit
- Created: 2024-09-20T19:37:08.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-02-10T01:47:11.000Z (4 months ago)
- Last Synced: 2025-04-23T18:52:47.882Z (about 2 months ago)
- Topics: animate, animation, css, design, motion, preset, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://rombo.co/tailwind/
- Size: 196 KB
- Stars: 2,977
- Watchers: 6
- Forks: 33
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ [tailwindcss-motion](https://rombo.co/tailwind/) ✨
[](https://www.npmjs.com/package/tailwindcss-motion)
[](https://www.npmjs.com/package/tailwindcss-motion)
tailwindcss-motion is a Tailwind CSS Plugin made at [RomboHQ](https://rombo.co/).
It’s a simple, yet powerful, animation library with a simple syntax.
_Motion, without commotion._
## ⚒️ Installation
**1. Install npm package**
```bash
npm i -D tailwindcss-motion
```
**2. Add into your tailwind.config.js**
```js
// tailwind.config.js
export default {
content: [...],
theme: {
extend: {...},
},
plugins: [require('tailwindcss-motion')],
};
```
**or,** to use ESM:
```js
import tailwindcssMotion from "tailwindcss-motion";
/** @type {import('tailwindcss').Config} */
export default {
content: [...],
theme: {
extend: {},
},
plugins: [tailwindcssMotion],
};
```
## 📝 TypeScript Support
The plugin includes TypeScript definitions out of the box. Theme customizations and plugin configuration are fully typed:
```ts
import type { Config } from "tailwindcss";
import motion from "tailwindcss-motion";
const config: Config = {
theme: {
extend: {
motionScale: {
"200": "200%",
},
motionTimingFunction: {
custom: "cubic-bezier(0.4, 0, 0.2, 1)",
},
},
},
plugins: [motion],
};
```
## How does it work?
We provide a simple syntax to animate any element in your Tailwind project. Instead of defining custom keyframes, we provide utility classes to animate every dimension, inline.
For example, for a slide and fade effect — you simply need `motion-translate-x-in-25 motion-opacity-in-0` or, you can use one of our presets with `motion-preset-fade`
## Documentation
For full documentation, visit [docs.rombo.co/tailwind](https://docs.rombo.co/tailwind)
## 🧩 Introducing the Chrome Extension
Take your animations to the next level with the [Rombo Chrome Extension](https://rombo.co/extension/)!
Create animations visually:
- Use our intuitive animator directly in your browser.
- Loop animations
- Save presets: Keep your animations organized and reusable.
- Export options: Output animations as Tailwind classes, pure CSS, or Framer Motion code.
## Examples
Landing page - https://play.tailwindcss.com/uAuVF8F1vC
Chat dialog - https://play.tailwindcss.com/gjGqEKswjQ
Low Battery Dynamic Island - https://play.tailwindcss.com/tvYFbHtNNQ
Apple Color Swatches - https://play.tailwindcss.com/cvQ3Nk3v8j
Rombo Loop - https://play.tailwindcss.com/MLdegkb9Wq
Emoji Animations - https://play.tailwindcss.com/86s55I4wmC
## What's Rombo?
Rombo is an early-stage company, building tools to help companies build beautiful interactive interfaces. We're starting out with a toolkit for engineers, designers and creative marketers to animate natively inside common Workflows — like Tailwind, Figma, Webflow, Shopify & more to come!
## More Resources
- [Bringing Motion to Tailwind CSS: Building an animation plugin at Rombo](https://www.kvin.me/posts/tailwind-motion) - Blog post about the creation of this library
- [Animator Builder](https://rombo.co/tailwind/#animator) - Create animations intuitively and export them to Tailwind classes
- [UnoCSS port](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion) - Port created by [@whatnickcodes](https://github.com/whatnickcodes)