'Border style not working on hover in tailwind
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?
Solution 1:[1]
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>
Solution 2:[2]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | dezman |
| Solution 2 |