How to add/remove class on hover using tailwind css?

@deron 

To add or remove a class on hover using Tailwind CSS, you can use the hover: variant provided by Tailwind CSS.

To add a class on hover, you can simply add the hover: prefix followed by the class you want to add. For example, if you want to add a bg-gray-200 class on hover, you can do it like this:

1

<div class="bg-gray-100 hover:bg-gray-200">Hover me</div>

This will add the bg-gray-200 class to the element when it is hovered over.

To remove a class on hover, you can use the hover: prefix followed by a class name with a ! symbol before it. For example, to remove a text-gray-500 class on hover, you can do it like this:

1

<div class="text-gray-500 hover:!text-gray-800">Hover me</div>

This will remove the text-gray-500 class from the element when it is hovered over.

By using the hover: variant in Tailwind CSS, you can easily add or remove classes on hover without the need for additional JavaScript or custom CSS.