Tailwind plugin

The plugin is optional. The prebuilt stylesheet already contains every token at its shipped value, and nothing in tailmotion.css requires the plugin. Add it when you want to change or extend those tokens, or use arbitrary values.

Setup

@import "tailwindcss";
@plugin "tailmotion/plugin";
@import "tailmotion/css";

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
  plugins: [require("tailmotion/plugin")],
};

Generated utilities

70 utilities across nine groups. Each writes one custom property with !important, so an element-level utility always beats an inherited motion profile.

Utility	Sets	Notes
`tm-duration-*`	`--tm-duration`	Replaces the class default outright, not scaled by a profile
`tm-delay-*`	`--tm-delay`
`tm-ease-*`	`--tm-easing`	Beats the inherited easing role
`tm-repeat-*`	`--tm-iteration-count`
`tm-distance-*`	`--tm-distance`	Retunes entrances, exits and presence offsets together
`tm-stagger-*`	`--tm-stagger-step`	The shorter spelling
`tm-stagger-step-*`	`--tm-stagger-step`	The 0.6 spelling. Same utility
`tm-speed-*`	`--tm-duration-scale`	A factor. Applies to the whole subtree
`tm-emphasis-*`	`--tm-emphasis` and `--tm-overshoot`	Both at once
`tm-overshoot-*`	`--tm-overshoot`	Flattens a spring without shrinking the entrance
`tm-hold-*`	`--tm-hold-duration`	For `tm-hold-confirm`

Arbitrary values work everywhere: tm-duration-[420ms], tm-speed-[0.9], tm-distance-[3rem], tm-ease-[cubic-bezier(0.2,0,0,1)].

Default token values

Group	Values
`durations`	150, 200, 300, 400, 500, 700, 900, 1000, 1200, 1400, 1600, 2000, 3000 ms
`delays`	0, 75, 150, 200, 300, 400, 500, 700, 1000 ms
`easing`	`linear`, `in`, `out`, `in-out`, `soft`, `snappy`, `bouncy`
`repeat`	1, 2, 3, `infinite`
`stagger`	50, 75, 100, 150, 200 ms
`distance`	4, 8, 12, 20, 30 px
`speed`	0.75, 0.85, 1, 1.1, 1.25, 1.5
`emphasis`	0, 0.5, 0.75, 1, 1.25, 1.5
`hold`	800, 1200, 1600, 2000 ms

Extending the tokens

Two equivalent ways. Options merge over the defaults; nothing is removed.

module.exports = {
  plugins: [
    require("tailmotion/plugin")({
      durations: { 750: "750ms", 1500: "1500ms" },
      easing: { springy: "cubic-bezier(0.22, 1, 0.36, 1)" },
      delays: { 600: "600ms" },
      stagger: { 120: "120ms" },
      distance: { 16: "16px" },
      speed: { 90: "0.9" },
      emphasis: { 25: "0.25" },
      hold: { 2500: "2500ms" },
    }),
  ],
};

module.exports = {
  theme: {
    extend: {
      tailmotion: {
        durations: { 750: "750ms" },
        easing: { springy: "cubic-bezier(0.22, 1, 0.36, 1)" },
      },
    },
  },
  plugins: [require("tailmotion/plugin")],
};

The merge order is: package defaults, then theme.extend.tailmotion, then plugin options. The last one wins.

TypeScript

import type { Config } from "tailwindcss";
import tailmotion from "tailmotion/plugin";

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
  plugins: [tailmotion],
} satisfies Config;

Plugin options are typed as TailMotionPluginOptions.

Usage-generated CSS (`usageGenerated`, experimental)

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
  plugins: [require("tailmotion/plugin")({ usageGenerated: true })],
};

Off by default. When true, the plugin also registers the “simple” animation and interaction catalogue (one class, one matching keyframe — fade, pop, bounce, and friends; see Installation for the full list) as real Tailwind utilities, so the v3 JIT emits only the ones your content uses instead of the whole catalogue. Their keyframes and the token/reduced-motion base layer still ship unconditionally regardless of usage — see the installation guide for why. Tailwind v3 only. Loaded through @plugin in Tailwind v4, this option ships the whole catalogue unconditionally with no pruning — v4’s compatibility layer for legacy JS plugins does not tree-shake addBase/addUtilities content by usage. Use the tailmotion/tailwind.css entry for Tailwind v4 instead. Use this instead of tailmotion/css, not alongside it — both define the same classes, so importing both ships everything twice.

What the plugin does not do

By default, it does not generate the animation classes. Those live in tailmotion.css, which you import separately — unless usageGenerated is on, above.
It does not generate variants. The prebuilt hover: / focus: / responsive selectors ship in variants.css, inside the stylesheet — Tailwind generates those itself for any utility usageGenerated registers.
It does not require Tailwind at runtime. tailwindcss is an optional peer dependency, and TailMotion works with no Tailwind at all.

Getting started

Concepts

Guides

Reference

Support

Setup

Generated utilities

Default token values

Extending the tokens

TypeScript

Usage-generated CSS (`usageGenerated`, experimental)

What the plugin does not do

​Setup

​Generated utilities

​Default token values

​Extending the tokens

​TypeScript

​Usage-generated CSS (usageGenerated, experimental)

​What the plugin does not do

Setup

Generated utilities

Default token values

Extending the tokens

TypeScript

Usage-generated CSS (`usageGenerated`, experimental)

What the plugin does not do