Getting Started

Motionwind v2 turns Tailwind-like animate-* classes into Motion-first animation data. React and Vue use compile-time transforms by default. Vanilla JavaScript and React Native use framework-specific runtime adapters, and React/Vue expose runtime components for dynamic classes.

The compile-time path

Write animation classes beside ordinary styling classes:

<button className="px-4 py-2 animate-hover:scale-110 animate-tap:scale-95 animate-focus:scale-105 animate-duration-200">
  Click me
</button>

In React, the compiler removes only the animation tokens, changes the host element to motion.button, adds whileHover, whileTap, whileFocus, and transition props, and preserves px-4 py-2. It injects the Motion import and, when needed in Next.js, the client boundary.

Vue follows the same model through its template transform. Both paths use the same motionwind-core parser as the runtime adapters and developer tools.

Static and dynamic classes

Static string literals and template literals containing statically discoverable animate-* tokens are compiled. A value assembled entirely at runtime cannot be known during the build:

// Compiled
<button className="animate-hover:scale-110">Static</button>

// Static animation token is compiled; the ordinary expression remains dynamic
<button className={`animate-hover:scale-110 ${active ? "is-active" : ""}`}>
  Mixed
</button>

// Use mw.* when the animation value itself is dynamic
<mw.button className={`animate-hover:scale-${large ? "120" : "105"}`}>
  Dynamic animation
</mw.button>

Import React runtime elements from motionwind-react. Vue uses <Motionwind>, mw.*, or useMotionwind for dynamic :class values.

Host and design-system components

Lowercase host elements remain the fastest compile-time path. In React v2, simple uppercase components can be compiled through Motion's component bridge, and the explicit typed API is preferred for reusable design-system components:

import { mw } from "motionwind-react";
import { Button } from "./button";

const MotionButton = mw.create(Button);

<MotionButton className="animate-hover:scale-105 animate-tap:scale-95">
  Save
</MotionButton>;

The wrapped component must forward its ref and relevant props to a DOM element. Use mw.create when that contract should be visible and type-checked.

Configuration and accessibility

Create tokens and presets in motionwind.config.ts, set strict: true in CI, and keep reducedMotion: "user" unless your application has a documented reason to override the operating-system preference. Runtime adapters receive the config through their initializer, plugin, or MotionwindProvider.

Do not place a generated Motion prop and a manual prop such as whileHover on the same element. The ESLint plugin reports duplicate gesture properties and unknown classes.

Choose the right level

Use classes for common gestures, mount transitions, scroll reveals, layout, drag, and variants where the selected adapter supports them. Use Motion directly for complex orchestration, imperative timelines, or any feature marked “direct API” in the Compatibility Matrix.

Next: install v2, define configuration, then explore the syntax registry.