How do I create a smooth fade-in animation using Tailwind CSS?
Asked on Sep 02, 2025
Answer
To create a smooth fade-in animation using Tailwind CSS, you can utilize Tailwind's utility classes alongside custom animations defined in your Tailwind configuration. This involves setting up keyframes for the fade-in effect and applying them using Tailwind's animation utilities.
<!-- BEGIN COPY / PASTE -->
<!-- Add this to your tailwind.config.js -->
module.exports = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 1s ease-in-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
},
},
},
}
<!-- Use the animation in your HTML -->
<div class="animate-fade-in">
This content will fade in smoothly.
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Define the animation in the Tailwind configuration file under the "extend" section to avoid overwriting default settings.
- The "fade-in" animation is applied using the "animate-fade-in" class on the desired element.
- You can adjust the duration and timing function in the animation definition to suit your needs.
- Ensure your project is set up to process the Tailwind configuration correctly for the custom animations to take effect.
Recommended Links: