Border style not working on hover in tailwind

user_637135 0
Viewed 7975

I'm using tailwind v2.1.0 with Laravel v8.12

I am trying to get hover on a tag with tailwind classes but its not working

<a href="/" class="text-gray-800 border-transparent border-b-2 hover:border-gray-600 hover:text-gray-800 px-3 py-2 text-sm font-medium uppercase">Home</a>

when I replace border-transparent with border-gray-100 or any other color, I can see the hover effect.

Initially I don't want any border that's why border-transparent was mentioned.

What could be the issue?

tailwind-css hover version border
2 Answers

The following classes should do the job:

hover:border-gray-700 border-transparent border-2

I found my answer from here

<li class="outline-none hover:border-gray-700 border-transparent border-2 hover:border-current" ><a href="#">Info</></li>
user_93418240

You just misspelled border-tranparent. Should be border-transparent

Edit: I don't see any issue with your code. Check the demo of your code.

user_53261910
Related