tailwindcss-motion is an MIT-licensed Tailwind CSS plugin for adding animation to web projects through utility classes, aimed at developers and designers already working in the Tailwind ecosystem.

What it is

tailwindcss-motion is a Tailwind CSS plugin built at RomboHQ, written in TypeScript and released as the tailwindcss-motion package. It sits alongside other entries in your tailwind.config.js plugins array and exposes animations as ordinary utility classes, so a slide-and-fade effect is written as motion-translate-x-in-25 motion-opacity-in-0, or shortened to a preset such as motion-preset-fade. The project describes itself as "Motion, without commotion" and ships documentation at docs.rombo.co/tailwind.

The concrete problem it addresses is the boilerplate of hand-written keyframes in Tailwind projects. Rather than defining custom @keyframes rules for each animation, the plugin provides utility classes that animate every dimension inline, so animation declarations live in the markup next to layout classes. Its theme keys, such as motionScale and motionTimingFunction, are exposed as typed configuration so custom values extend the default set without losing autocomplete.

Key capabilities

• Animates individual dimensions inline through utility classes, for example motion-translate-x-in-25 combined with motion-opacity-in-0.
• Provides ready-made presets such as motion-preset-fade for common effects, covering use cases from fading and looping to emoji animation.
• Ships TypeScript definitions out of the box, with typed theme customizations including motionScale (for example "200": "200%") and motionTimingFunction (for example "custom": "cubic-bezier(0.4, 0, 0.2, 1)").
• Installs as a dev dependency and registers either through require('tailwindcss-motion') or the ESM import tailwindcssMotion from "tailwindcss-motion".
• Works with a companion Chrome extension that animates visually in the browser, loops animations, and saves presets for reuse.
• Exports animations from that extension as Tailwind classes, pure CSS, or Framer Motion code, alongside a browser-based Animator Builder.
• Has a community UnoCSS port, unocss-preset-tailwindcss-motion, contributed by @whatnickcodes.

Who uses it and how

• Front-end developers adding motion to Tailwind pages who would otherwise write custom keyframes, using the utility classes directly in JSX or HTML.
• Designers and creative marketers prototyping animations visually in the Chrome extension, then handing off output as Tailwind classes, CSS, or Framer Motion code rather than a design file.
• Teams reproducing published animation patterns, with Play Tailwind examples covering a landing page, a chat dialog, a Low Battery Dynamic Island, Apple color swatches, and a looping Rombo animation.
• Projects already using Rombo's wider toolkit, which targets animation inside workflows such as Tailwind, Figma, Webflow, and Shopify.
• UnoCSS users adopting the port instead of the original plugin.

Getting started

Install the package with npm i -D tailwindcss-motion, then add require('tailwindcss-motion') (or the ESM default import) to the plugins array in tailwind.config.js; full documentation lives at docs.rombo.co/tailwind.

How it compares

Among the tools named in its own documentation, tailwindcss-motion occupies the Tailwind configuration layer, whereas Framer Motion appears only as an export target from the Chrome extension rather than a runtime dependency, and the UnoCSS port exists precisely for projects that have adopted UnoCSS instead of Tailwind. It therefore complements rather than replaces animation libraries outside that setup: you adopt it when your styling is already Tailwind, and you reach for something else when it is not.

When to use it — and when not to

The self-hoster's burden here is minimal, since the plugin adds no database, storage, or SMTP of its own, but it does assume an existing Tailwind build pipeline and a tailwind.config.js that accepts plugins — a plain CSS or non-Tailwind project gains nothing from it. Skip it if you need framework-level animation orchestration, or if the visual animator and its exports matter to you, since the Chrome extension and Animator Builder are a separate Rombo product from the plugin itself. Note also that the repository currently carries 38 open issues, which is worth reviewing before committing to it as a long-term dependency.

npm i -D tailwindcss-motion

// tailwind.config.js

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

import tailwindcssMotion from "tailwindcss-motion";

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

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],
};