Gotcha: Transitioning Specific Properties (e.g., Width)

GOTCHA: Instant Width Change (No `transition-all` or `transition-[width]`)

By default, `transition` (with `duration` and `ease`) might not animate `width` or `height` changes. The element below will change width instantly on hover.

Hover - Width Changes Instantly

Notice the width change is abrupt.

SOLUTION 1: Using `transition-all`

Using `transition-all` tells Tailwind to attempt to transition *all* animatable properties.

Hover - Smooth Width (transition-all)

Here, the width change is smooth.

SOLUTION 2: Using `transition-[width,height]`

You can explicitly list properties to transition: `transition-[width]`, `transition-[height]`, or `transition-[width,height]`.

Hover - Smooth Width (transition-[width])

Specifying `transition-[width]` also makes it smooth.