Revision history [back]
 | 1 | initial version |
To achieve a seamless transition of background-color on hover using Tailwind, you can use the "transition" and "hover" utilities. Here's an example:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Hover Me</button>
In this example, we have a button with a blue background color ("bg-blue-500"). We specify that on hover, the background color should change to a darker blue ("hover:bg-blue-700"). We also add a transition effect with a duration of 300 milliseconds and an ease-in-out timing function to make the color change smooth ("transition duration-300 ease-in-out").