Hover not working in hyperlinks using tailwind css

Question

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>

Answer 1

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: [],
}