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>
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>