Transitions and Hover

Hover

you can change some properties on hover by using the .hover:{border, bacground, text color class} class

<div class="p-4 bg-blue-600 hover:bg-red-600 hover:text-grey-600">
    Hover over me
</div> 

Trasitions

You can send transitions-property property by using one of the following classes

You can send transitions-duration property by using the class .duration-{ multiple of 100 } and transitions-timing property by using the class .timing-{linear,ease-in ,ease-out,easin-out}

 <div class= "p-4 bg-blue-600 hover:bg-red-600 hover:text-grey-600 transtion-color duration-200 timing-linear">
Hover over me
</div>