Tailwind CSS is awesome. Animations are awesome. So let's combine them! It's really easy to define your own custom animations with Tailwind.
Quick CSS animation refresher
A CSS animation is defined by creating a set of keyframes. These keyframes define what CSS properties are applied at different points during the animation. When the animation is performed, the browser gradually transitions these properties between keyframes, creating an animation. Here's a simple example that makes an element spin:
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
These keyframes define the animation, and they are applied by using the animation CSS property on an element. This is a shorthand property that allows you to set multiple animation-related properties, such as animation-name and animation-duration, in a single line.
Let's apply the spin animation to an element:
.box {
margin: 50px;
width: 200px;
height: 200px;
background: red;
animation: spin 1s infinite;
}
Here is the result:
Animating with Tailwind
Now that we remember how animation works with CSS, let's do it the Tailwind way. Tailwind ships with a few built-in animations, such as:
These animations can then be applied to an element by adding the class animate-<animation name>, e.g. animate-spin.
Let's say we want to do a fancier animation than the ones that are built in. Let's add a roll animation that moves and rotates the element. We can extend Tailwind to add new animation classes to do whatever we want.
To do this, you will need to edit your Tailwind configuration file. This is where the custom keyframes and animations are defined. These are set by specifying or extending the keyframes and animations properties in the theme.
First, let's define the keyframes:
module.exports = {
theme: {
extend: {
keyframes: {
roll: {
'0%, 100%': { transform: 'translateX(0) rotate(0deg)' },
'50%': { transform: 'translateX(20rem) rotate(385deg)' }
}
}
}
}
};
As you can see, Tailwind lets you combine keyframes if they have the same CSS properties. The keyframes we've defined here have the element in its original position with no rotation at the beginning and the end of the animation. At the halfway point of the animation, the element is moved 20rem to the right and rotated 385 degrees.
Next, we have to define an animation that uses these keyframes, under the animations property:
module.exports = {
theme: {
extend: {
keyframes: {
roll: {
'0%, 100%': { transform: 'translateX(0) rotate(0deg)' },
'50%': { transform: 'translateX(20rem) rotate(385deg)' }
}
},
animations: {
roll: 'roll 3s ease-in-out infinite'
}
}
}
};
These changes will cause Tailwind to define a new class called animate-roll. All we have to do now is apply that class to an element, along with a little extra Tailwind styling, and we're done!
<div class="p-20">
<div class="animate-roll bg-blue-600 border-2 border-blue-700 text-white px-8 py-2 rounded-md text-center w-40 font-bold text-xl">
Hello Tailwind!
</div>
</div>
The final result can be seen in this Tailwind Play playground.
