Animations with Tailwind, no JavaScript

Tailwind CSS animates with CSS alone: transition-*, duration-* and animate-* compile to transitions and keyframes, so the browser runs no JavaScript to move an element.

How to declare an animation

In Tailwind 4 the theme lives in CSS: a --animate-name variable creates the animate-name utility, and the @keyframes sit in the same @theme block. No tailwind.config.js is needed.

@import "tailwindcss";

@theme {
  --animate-slide-in: slide-in 240ms ease-out;

  @keyframes slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

After the build the element uses class="animate-slide-in" and the browser applies the keyframes without listening for events. The tailwindcss.com documentation, read on 1 November 2026, describes --animate-* as a theme namespace.

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

The command needs Node and rewrites dist/output.css on every save; src/input.css has to start with @import "tailwindcss";.

State transitions, not timelines

Hover, focus and theme changes need only transition-colors and duration-200: the property changes and the browser interpolates. For an entrance tied to an attribute such as data-state="open", the variant data-[state=open]:animate-slide-in removes the orchestration JavaScript.

• A CSS transition never blocks the main thread and adds no kilobytes of JavaScript.
• With motion-reduce:animate-none you honour prefers-reduced-motion, and the manual test stays mandatory.
• The 97 cached blocks animate nothing by default: animate-* appears 0 times.
• Source: the tailwindcss.com documentation and the MIT licence in the repository, read on 1 November 2026.

Where it breaks

The exit is the hard part: if the node leaves the DOM the transition never starts. You need transition-behavior: allow-discrete and @starting-style, or a transitionend listener that unmounts the node after the last frame. Tailwind sequences nothing and delays no unmount: that decision belongs to the component.

Where to continue

The EneUI catalogue holds typewriter, typing-animation and marquee along an SVG path, all built with Tailwind classes. The definition of the framework is in what Tailwind CSS is; the library comparison is in the best animation libraries; the comparison of CSS approaches is in Tailwind against CSS modules. The other two pieces in the series are focus-visible with Tailwind and print styles with Tailwind.