Transitions

Definition

Utilities for controlling which CSS properties transition smoothly when they change state (like on hover).

Explain Like I'm New

If a button is blue, and `hover:bg-red-500` makes it red, the change happens instantly in 0 milliseconds. It looks harsh and glitchy. Adding `transition-colors` tells the browser: 'Slow down. Morph the blue into red smoothly over a fraction of a second.'

Real World Example

Making a 'Subscribe' button smoothly fade its background color and slightly lift up (`hover:-translate-y-1`) when the mouse passes over it.

Common Use Cases

•Hover states
•Focus rings
•Expandable accordions

Interactive Example

Interview Questions

basic

What Tailwind class must you add to enable smooth fading between a normal background color and a `hover:` background color?

intermediate

Why is `transition-all` generally discouraged in favor of `transition-colors` or `transition-transform`?

Flash Cards

Question

Which class?

Click to reveal answer

Answer

`transition` (which defaults to colors, opacity, and box-shadow) or `transition-colors`.

Question

Why transition-all discouraged?

Click to reveal answer

Answer

Performance. `transition-all` tells the browser's rendering engine to constantly watch every single CSS property for changes. Watching just `colors` or `transform` is vastly cheaper for the CPU.