I tried to change the color of the list created below while hovering but it doesnot do what it is supposed to do . I can't figure out what i am missing here.
<ul className="ul">
<li>
<a className="hover:text-white bg-purple border-white rounded-sm" href="#">abcd</a>
</li>
</ul>
It works, but when You use hover: in tailwindcss You need to be more specific and exactly. Below example with your code snippet(I changed a little to see the effect). You might simple convert this code to react.js adding className instead of class.
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="h-full">
<div class="flex items-center justify-center h-screen">
<ul>
<li>
<a class="hover:text-white hover:bg-purple-600 hover:border-gray-300 border-2 rounded-sm p-3" href="#">It Works!</a>
</li>
</ul>
</div>
</body>Your problem is already solved, but it seems that searches for similar problems are redirected here, so I'll give a second solution in case this isn't the case in particular.
If you are using Tailwind regardless of the environment where you use it as an example with some framework or if it is through CDN, you must be specific with the path of your files in tailwind.config in the content object
example:
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}