0
0
Tailwindmarkup~5 mins

Transition utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Transition utilities help make changes on a webpage smooth and nice to watch. They add simple animations when things change.

When you want a button to change color smoothly when hovered.
When showing or hiding a menu with a fade effect.
When an image grows or shrinks gently on click.
When you want text to appear softly instead of popping instantly.
Syntax
Tailwind
transition [property] [duration] [timing-function] [delay]

transition enables transitions on elements.

You can control what changes, how long it takes, and how it feels.

Examples
This makes color changes happen over 300ms with a smooth start and end.
Tailwind
transition-colors duration-300 ease-in-out
This makes opacity changes fade over half a second.
Tailwind
transition-opacity duration-500
This makes size or position changes happen quickly and evenly.
Tailwind
transition-transform duration-200 ease-linear
Sample Program

This page shows a blue button that changes its background color smoothly when you hover over it. It also has a visible focus ring for keyboard users, making it accessible.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Transition Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="bg-blue-600 text-white px-6 py-3 rounded transition-colors duration-500 ease-in-out hover:bg-blue-400 focus:outline-none focus:ring-4 focus:ring-blue-300" aria-label="Click me button">
    Hover me
  </button>
</body>
</html>
OutputSuccess
Important Notes

Always include focus styles for accessibility so keyboard users see where they are.

Use transition utilities with specific properties like transition-colors to keep animations smooth and efficient.

Try different duration and ease classes to find the best feel for your site.

Summary

Transition utilities make changes smooth and pleasant to watch.

Use them to animate colors, opacity, size, and more.

Combine duration and easing classes for the best effect.