
Tailwind animation-How to create Tailwind CSS Animation

By Emmanuel Chinonso
Technical Writer
Web Animations make your websites come alive, when done properly they capture users' attention and make for an immaculate user experience.
Web Animations have become the norm recently as developers are constantly making use of animations on their projects to make their applications interactive.
This has made many companies and websites adopt this technology on their website and applications.
When you click a button or open a website, and there are movements on the site, you look at an amination.
In the present day, anything from a cartoon to Japanese anime is considered animation. With simple CSS and JavaScript, you can create amazing animations.
However, Creating animations in Tailwind has proved easier to do and create from scratch. This is because we have access to styling out of the box.
In this tailwind CSS tutorial, we are going to look at
- What is Animation
- How to create Tailwind Animation.
- How to use customized Tailwind animation.
Table of Content
- What is Animation
- Prerequisite
- How to create Tailwind CSS Animation.
- How to use customized animation in Tailwind CSS.
- Conclusion
What is Animation
Animations are used to make elements move from one position to another over some time on your website. Aminations are often, at times, triggered by events such as scrolling, and loading of webpages or applications. In this Tailwind CSS tutorial, we will look at how to use the tailwind CSS animation.
How do you animate with tailwind CSS
Adding animation with Tailwind is as easy as simply appending the class animate-
to the element you wish to animate.
Tailwind CSS also offers some default animations such as
- Animate-spin
- Animate-bounce
- Animate-ping
- Animate-pulse
As their name implies, we will use all of this default utility class animation to build a website loader.
At the end of the tailwind CSS tutorial, our project will look like the image below.
Prerequisite
To make the most of this Tailwind CSS tutorial, you need the following
- Basic Knowledge of HTML and CSS animations.
- Tailwind CSS installed in your project. To figure out how to do this, you can check out our article on installing Tailwind CSS
.
Tailwind animation: Building our Loader
Before we jump right in, you must link your Tailwind CSS stylesheet to your HTML. Just like the code below
<link rel="stylesheet" href="styles.css">
Your project's HTML head should be like this
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Website loader</title></head>
We can go ahead to build our loader. To make our loader as rich as possible, we will create four different kinds of animations with four different Tailwind animation classes.
<body class="flex justify-center items-center bg-white-900 h-screen"> <div class="bg-white flex space-x-2 p-5 justify-center items-center"> <div class="m-auto ml-10 h-20 w-20 bg-blue-900 p-2 animate-spin"></div> <div class="m-auto ml-10 h-20 w-20 bg-purple-500 p-2 animate-ping"></div> <div class="m-auto ml-10 h-20 w-20 bg-green-600 p-2 animate-bounce"></div> <div class="m-auto ml-10 h-20 w-20 bg-blue-500 p-2 animate-pulse"></div> </div></body>
We use class names for our divs to affect different properties of our div
element. These class names are:
m-auto
, centers yourdiv
horizontally. Offers the same functionality as the native CSSmargin: auto
.ml-10
, gives yourdiv
a margin-left of 10px. Offers the same functionality as the native CSSmargin-left: 10px
.h-20
, defines the height of yourdiv
. Offers the same functionality as the native CSSheight: 20px
.w-20
, defines the width of yourdiv
. Offers the same functionality as the native CSSwidth: 20px
.
The Tailwind animation classes we use to define the animation we want in our project are :
animate-spin
, gives your element a linear spin animation.animate-ping
, makes the element scale and fade out.animate-bounce
, gives your element the illusion of bouncing.animate-pulse
, this makes your element gently fade in and out.
Our animated loader should look like the image below.
How do I add Custom Animation to Tailwind?
Tailwind CSS animations are not limited to only the animations mentioned above, you have the freedom to create more complex, and more interesting Tailwind animation plugins. You can even increase your tailwind animation speed. Asides from the div
element we could animate other HTML elements, an example would be to animate the button
element to make them more responsive.
With the Tailwind CSS animation, you can customize your animation to better suit your needs. You can easily customize your Tailwind animation by visiting the configuration file.
In this configuration file, you can add, remove, and change animations in the tailwind.config.js
file. We define the animation behavior in the animation
section of the module.exports
object.
module.exports = { theme: { extend: { animation: { 'spin-slow': 'spin 3s linear infinite', }, }, },};
You can also use @keyframes
to define animations not already created in native CSS.
// tailwind.config.js
module.exports = { theme: { extend: { keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' }, }, }, }, },};
With the @keyframes
we define the Tailwind animation for when it is 0% and 100% complete, we want to rotate the element 3 degrees left, and when it is 50% complete we want to rotate the element 3 degrees right.
After creating the animation we can reference the wiggle animation in the animation
section of our module.exports
object. You can check out the animation documentation.
module.exports = { theme: { extend: { animation: { wiggle: 'wiggle 1s ease-in-out infinite', }, }, },};
Once you have added your custom animation, remember to run npm run build
to build it to your CSS.
Conclusion
Creating Tailwind CSS animations is a great way to add life and interactivity to your web pages. With the help of Tailwind CSS, you can quickly create complex and visually stunning animations without having to write a lot of code. By following the steps outlined in this article, you should be able to create beautiful and effective Tailwind animations.
Resources
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Related Posts
Comments
...