Ask Your Question
2

What is the method to achieve a seamless transition of background-color on hover using Tailwind?

asked 2023-07-19 14:13:21 +0000

lalupa gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2023-07-19 14:20:02 +0000

plato gravatar image

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").

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-07-19 14:13:21 +0000

Seen: 11 times

Last updated: Jul 19 '23