AUG 22, 2026

Tailwind v4 keyframes live inside @theme

Custom animations are theme tokens now — define @keyframes nested in the @theme block and the utility class appears.

tailwindcsstil

Tailwind v4 has no config file, so where do custom animations go? Inside the @theme block, keyframes and all:

globals.css
@theme {
  --animate-pulse-dot: pulse-dot 2.6s ease-in-out infinite;
 
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
}

That one token yields a animate-pulse-dot utility, and the keyframes are only emitted into the CSS when the utility is actually used. The status dots on this site's BUILDING badges run on exactly this.