tailwindcss-motion

Why we included this project

Most Tailwind projects end up with a pile of hand-written keyframes or a heavy animation library bolted on the side. tailwindcss-motion takes the opposite route: motion becomes utility classes, so a slide-and-fade effect is just motion-translate-x-in-25 plus motion-opacity-in-0, and presets like motion-preset-fade cover the common cases. It installs as a normal Tailwind plugin, works in ESM and CommonJS setups, and ships TypeScript definitions, with theme hooks for custom scales and timing functions. That keeps all the motion logic inside the Tailwind config instead of scattered across CSS files, which is exactly what a design system wants. The companion browser extension is a nice extra: you can build animations visually and export them as Tailwind classes, pure CSS, or Framer Motion code.