Skip to main content
TailMotion is a stylesheet. Everything below is about getting that stylesheet into your project in the right order.

​
The one rule

Import tailmotion/css after Tailwind. TailMotion’s rules live in a native @layer utilities, and it expects Tailwind’s output to already be in the document.

​
Standalone CSS

No Tailwind, no build step, no plugin. Every class in the library works.
Pin the CDN URL to the release you tested. In an application with a bundler, prefer the CSS or JavaScript import — you get the same file with a hash your deploy controls.

​
Tailwind CSS v4

Tailwind v4 emits its own utilities into a native @layer utilities, the same layer TailMotion uses, so source order decides conflicts. Importing TailMotion last means a motion class wins over a Tailwind utility that touches the same property.

​
Tailwind CSS v3

Then import the stylesheet after Tailwind’s directives:
Tailwind v3 emits its utilities unlayered, and unlayered CSS beats every layered rule regardless of specificity. On the rare element where a Tailwind utility and a TailMotion class fight over the same property — opacity-0 on a tm-presence-* panel is the realistic case — the Tailwind utility wins in v3 and TailMotion wins in v4. Let TailMotion own opacity, translate, scale and visibility on an element it is animating, and the question never comes up.

​
The Tailwind plugin is optional

The prebuilt stylesheet already contains every timing, easing, distance and stagger token at its shipped value. Add the plugin only when you want to change or extend those tokens, or use arbitrary values like tm-duration-[420ms]. Nothing in tailmotion.css requires the plugin, and nothing breaks without it. See the plugin reference for every utility it generates and every option it accepts.

​
Module entries

The convenient entry is the whole library and is not tree-shaken. Each focused entry below is a real bundle boundary — you can take presence or scroll without the rest — and carries the shared token layer it needs, so it works on its own.
Sizes and the trade-off are in Imports and bundle size.

​
Per-animation files

For the smallest possible stylesheet, import the base plus only the animations you use:
Keep base.css first: it pulls in the token layer and the motion profiles, and provides RTL mirroring and reduced-motion behaviour. Per-animation imports do not include the prebuilt hover: / focus: / responsive selectors from variants.css.

​
TypeScript

Types ship with the package. The ones worth knowing about:
TailMotionVars is the useful one — it makes an inline style object autocomplete every variable TailMotion reads:

​
Verifying an install

Inside this repository that builds the stylesheets and runs the static checks. In your own project the equivalent smoke test is one element:
If it appears without moving, the stylesheet did not load, or prefers-reduced-motion: reduce is on — which is the correct behaviour, not a bug.