When it comes to enhancing user experience in web applications, animations play a pivotal role. TailwindCSS simplifies the process of adding animations, but what if you want more than the basic options? In this article, I will guide you through extending TailwindCSS animations, allowing you to create custom, dynamic animations without relying solely on custom CSS.
Understanding TailwindCSS Animations
TailwindCSS provides four primary animations: spin, ping, bounce, and pulse. These animations are straightforward to implement but often lack the granularity and control that developers desire. While these default options are convenient, you may find yourself needing more sophisticated animations tailored to your application’s unique requirements.
The Need for Customization
In many cases, developers want to tweak animations, such as changing speed or applying unique effects like “wiggle.” The great news is that TailwindCSS allows for customization through the configuration file, enabling you to add new animations and define their characteristics.
Setting Up Extended Animations
To get started, you’ll want to locate your TailwindCSS configuration file (typically tailwind.config.js). Here’s a step-by-step process to extend the basic animations.
Step 1: Adding a New Animation
Let’s say you want to create a slower version of the spin animation, which we’ll call spin-slow. You’ll begin by accessing your Tailwind config file:
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 1s linear infinite',
}
}
}
}
In this example, we've referenced the existing spin animation and adjusted its duration to one second while maintaining a linear easing.
Step 2: Creating Unique Animations
Beyond modifying existing animations, you can create entirely new ones, such as a "wiggle" effect. To do this, you'll define keyframes in your Tailwind config:
module.exports = {
theme: {
extend: {
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-9deg)' },
'50%': { transform: 'rotate(9deg)' },
},
},
},
}
}
This configuration introduces a wiggling animation that rotates an element back and forth.
Enhancing Animations with Plugins
While the default TailwindCSS animations are helpful, they may not cover all your needs, such as adjusting animation timing, delays, or even controlling play states. Here’s where plugins come into play.
Installing the TailwindCSS Animate Plugin
To gain more control over animations, you can use the TailwindCSS Animate plugin. To install this plugin, follow these steps:
- Install the plugin via npm:
npm install tailwindcss-animate
- Add the plugin to your Tailwind configuration:
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
}
This plugin extends the functionality of TailwindCSS, allowing you to define animation durations, delays, and play states easily.
- Implementing Advanced Animation Features
Once the plugin is installed, you can use it to define attributes like duration and delay directly within your HTML:
<div class="animate-wiggle duration-75 delay-1000"></div>
This example applies the wiggle animation with a duration of 75 milliseconds and a delay of one second.
Managing Animation States
One of the most powerful features of the animate plugin is the ability to control whether an animation is running or paused. By toggling classes, you can pause animations based on user interactions, enhancing the interactive experience.
Example: Toggling Animation States
let isRunning = true;
const toggleAnimation = () => {
isRunning = !isRunning;
document.querySelector('.animate-wiggle').classList.toggle('paused', !isRunning);
document.querySelector('.animate-wiggle').classList.toggle('running', isRunning);
};
This code snippet allows an animation to be paused or resumed with a click, providing a dynamic user interface element.
Connect with me
If you like this article be sure to leave a comment. That will make my day!
If you want to read other stuff by me you can check out my personal blog.
If you want to connect with me you can send me a message on Twitter/X.
You can also check other stuff that I have going on here
Top comments (18)
Tailwind can make development faster, at least you don't have to switch from markup file to CSS, then thinking about what you'll name a certain class that you will reference in the css file. Or in case of other tools like bootstrap, it's easier to create customized components or what.
If the problem is the markup will be cluttered you can always create a separate file per components that contains the CSS, use styled components or what, there's a lot of ways. Another good thing about tailwind is it cancels out the default styling of browsers, you can achieve great consistency when it comes to styling
True, but the primitives style on them are great start and picking color on the fly as well, I using tailwind for most of the styling and inline style for dynamic stuff based on some state
Somewhat true but I find it much easier to understand and even to learn CSS.
While that's great, that's not its purpose. In fact, there's absolutely no other valid argument for Tailwinds.
I think developer experience is a great argument for it.
As usual, in tech, what matters is if the app works as required. The tech stack is up to the devs.
You think that way cuz you haven't used tailwind on a project properly yet. It's game changing, especially combining it with a component/partial based framework or rendering engine.
Just what I needed right now. Tailwind’s first-party animation utilities are lacking, and I wasn’t 100% happy with the existing animate.css plugins Thank you for putting this together :)
You are welcome. Really glad you liked it.
Thanks for the awesome feedback!
I would love a small section on why someone might prefer using this approach, over just defining a class in CSS. Might be a good idea for others who might feel this is basically writing CSS the long way. :)
Thanks for the awesome feedback!
I will definitely write an article about that.
Is tailwind capable of scroll based animation with or without plugin, I'm making a basic navbar like it disappears at top of the screen and show up on scroll I don't like using framer-motion it's overkill for what I want
Sorry for the delay in the answer.
The answer is yes. I dont know any plugin but I bet there are a couple.
Without plugin you need to create a custom hook to determine if the navbar is visible in the view port of not and apply some tailwind classes like:
transition-opacity
ease-in
duration-700
${isVisible ? "opacity-100" : "opacity-0"}
You can check out this article for more information: medium.com/@jacobvejlinjensen/how-...
Great post thanks, actually I'm used to the basic annimation proposed by tailwind, the annimate plugin seems to give more controll over the annimation.
Thanks!
Tailwind is the only way to style components - prove us wrong.
thanks
You are welcome!