Transitions and Hover

Hover

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

Hover over me
<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

Class Properties
.transition-all all
.transition-colors color, background-color, border-color, opacity
.transition-width width
.transition-height width
.transition-size width, height

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>   
Hover over me

On this page