Example 2: Addressing the "Gotcha" - Transitioning Width

Gotcha Explanation:

By default, Tailwind's `transition` class animates common properties (colors, opacity, shadow, transform). If you want to transition properties like `width` or `height`, they won't animate smoothly unless you also specify `transition-all` or list them explicitly (e.g., `transition-[width,height]`).

Problem: Width transition (No `transition-all`)

This box attempts to change width on hover. Without `transition-all` or `transition-[width]`, the width change will be INSTANT, not smooth, even though `transition`, `duration`, and `ease` are applied.

Hover Me (Width Jumps)

Classes used: `w-32 hover:w-64 transition duration-500 ease-in-out`

Solution 1: Width transition with `transition-all`

This box uses `transition-all` to ensure all property changes, including width, are animated smoothly.

Hover Me (Width Smooth)

Classes used: `w-32 hover:w-64 transition-all duration-500 ease-in-out`

Solution 2: Width transition with `transition-[width]`

This box uses `transition-[width]` to explicitly tell Tailwind to transition the `width` property.

Hover Me (Width Smooth)

Classes used: `w-32 hover:w-64 transition-[width] duration-500 ease-in-out`

Note on `display` property: Transitions do not work on all CSS properties. For example, you cannot transition the `display` property (e.g., from `hidden` to `block`). For showing/hiding elements with animation, you typically transition `opacity`, `height`, or `max-height`.