Add utility for hover-off transitions

[jameslkingsley]

Hey!

There's a nice pattern I've seen used on some sites, where the transitions only occur when leaving an element (or longer duration when leaving). This helps to give the user an immediate latency-free-feeling UI, while still keeping the visual smoothness of a transition.

Here's a working example: https://codepen.io/JLKingsley/pen/KKVbJeM

I'm not too sure how the API would look for Tailwind, or if it's outside the scope of what Tailwind does.

[mgibas]

I believe you can achieve that with transition hover:duration-150

[paulpopus]

@jameslkingsley you can achieve this by extending the transition timings.

The transition duration in CSS is applied per state with inheritance. So if I have a 1s transition on my element and 0.2s on hover for my element, when I hover the transition will take 0.2s and when I remove my mouse out of hover it will take 1s.

In tailwind, extend your variants for the transitionDuration utility

...
transitionDuration: ['responsive', 'hover', 'focus'],
...

Then in your HTML you can do something like this

<h1 class="text-black hover:text-red duration-1000 hover:duration-200">My title</h1>

This will apply a quick animation on hover and a slow one on mouse leave. You can look at other ways to extend the duration utility here https://tailwindcss.com/docs/transition-duration/#responsive-and-pseudo-class-variants