How to give hover class less precedence in TailwindCSS-CodePudding

I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:

We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.

The problem: Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.

These are the classes I'm using for now

<Tag
clssName={`flex rounded border border-gray-200  bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>

Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.

CodePudding user response：

You can add different styles for active and non-active variants.

<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>

CodePudding user response：

Well you can use focus utility for this.

Below is the example you can see where button has different behaviour on hover and focus.

<script src="https://cdn.tailwindcss.com"></script>
<div >
  <button >Click </button>
  </div>