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:
@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.