TailwindCSS Animation Examples

Here are some simple examples showing how to use Tailwind (and some vanilla JavaScript) to make custom CSS animations to go beyond the basic animations built into Tailwind CSS.

The goal is to provide a collection of reference examples for doing the simple but sometimes tricky things that are building blocks in creating custom animations. Animations are often made a bit more challenging when you're working within TailwindCSS, especially without a lot of reference examples.

Edging Ball: A single ball edges along the inside of a square container

Triangle: Balls travelling in a triangular path