How do I create a smooth fade-in animation using Tailwind CSS?
Asked on Sep 01, 2025
Answer
To create a smooth fade-in animation using Tailwind CSS, you can utilize Tailwind's utility classes for transitions and opacity. By combining these utilities, you can achieve a fade-in effect on an element.
<!-- BEGIN COPY / PASTE -->
<div class="opacity-0 transition-opacity duration-1000 hover:opacity-100">
Hover over this text to see the fade-in effect.
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The class "opacity-0" sets the initial opacity to 0, making the element invisible.
- "transition-opacity" enables the transition effect specifically for opacity changes.
- "duration-1000" sets the transition duration to 1000 milliseconds (1 second).
- "hover:opacity-100" changes the opacity to 100% when the element is hovered over, creating the fade-in effect.
- You can adjust the duration and trigger (e.g., using "focus:" instead of "hover:") to suit your needs.
Recommended Links: