Skip to main content

​
The entry points

​
Sizes

Measured from the built output. Gzipped is the number that matters over the wire. Run npm run check in the repository to regenerate this table.
A large share of every module is comments and the shared token layer. The stylesheets ship unminified on purpose — they are meant to be read — and every bundler and CDN minifies them on the way out.

​
Two things to be honest about

The full bundle is not tree-shaken. Importing tailmotion/css ships every class whether you use them or not, and 29.5 KB gzipped is the whole file. CSS has no import graph a bundler can prune, and TailMotion does not pretend otherwise. If size matters, take module entries or per-animation files.
Modules repeat the token layer. Each focused entry is self-contained so it works on its own, which means importing two of them ships the shared :root block twice. If you need more than one module, import tailmotion/css instead — its build inlines each shared file exactly once.

​
Choosing an entry

29.5 KB gzipped, no build step, no plugin, every class available. This is the right answer for most projects.
4.6 KB gzipped, works standalone. Add tailmotion/profiles.css if you also want motion personalities.
Once you are past one module, the full bundle is smaller than the sum of the parts, because the shared token layer stops repeating.
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. Add them yourself with Tailwind variants if you need them.

​
What is in the 203 KB

Measured from the source files the build inlines. The remaining ~3 KB is the banner and the per-file markers the build inserts. If variants.css is dead weight for your project — because you generate variants with Tailwind instead — per-animation imports skip it entirely.

​
Optional JavaScript

A separate entry, not pulled in by tailmotion/css, and required by no class in the stylesheet. It exists for the two things CSS genuinely cannot do: counting from 0 to 4,271, and rotating a list of words. See the zero-runtime boundary.