Skip to content

Latest commit

 

History

History
93 lines (59 loc) · 3.23 KB

README.md

File metadata and controls

93 lines (59 loc) · 3.23 KB
Raw

✨ tailwindcss-motion ✨

NPM Version NPM Downloads

tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.

Motion, without commotion.

⚒️ Installation

1. Install npm package

npm i -D tailwindcss-motion

2. Add into your tailwind.config.js

// tailwind.config.js

export default {
     content: [...],
     theme: {
        extend: {...},
     },
     plugins: [require('tailwindcss-motion')],
};

or, to use ESM:

import tailwindcssMotion from "tailwindcss-motion";

/** @type {import('tailwindcss').Config} */
export default {
     content: [...],
     theme: {
          extend: {},
     },
     plugins: [tailwindcssMotion],
};

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

Examples

Landing page - https://play.tailwindcss.com/uAuVF8F1vC

example-1

Chat dialog - https://play.tailwindcss.com/gjGqEKswjQ

example-2

Low Battery Dynamic Island - https://play.tailwindcss.com/tvYFbHtNNQ

example-3

Apple Color Swatches - https://play.tailwindcss.com/cvQ3Nk3v8j

example-4

Rombo Loop - https://play.tailwindcss.com/MLdegkb9Wq

example-5

Emoji Animations - https://play.tailwindcss.com/86s55I4wmC

example-6

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! Sign up for our waitlist at https://rombo.co/tailwind/#waitlist

More Resources