Ask any question about Tailwind CSS here... and get an instant response.

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.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How do I create a smooth fade-in animation using Tailwind CSS?

Asked on Sep 01, 2025

Answer

The Q&A Network