Tailwind - Links do not have the default cursor pointer on hover

Question

We use Tailwind CSS in our project. Any <a href*> tag should by default change the mouse pointer to cursor:pointer. In our normal HTML designs, this works fine, but when converted to ReactJS, all links display the normal cursor, and not the pointer.

So, I want to force the cursor:pointer to a-href elements in the Tailwind output style.css. I tried:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    a {
        @apply cursor-pointer;
    }
}

That did not work. When inspecting any link element in chrome, I do not see cursor: pointer in the css for <a href*> tags.

This is weird because I fiddled in the tailwind playground and it worked, but not in my project: https://play.tailwindcss.com/d3rpFZd6gM?file=css

Answer 1

Have you tried

@tailwind base;
@tailwind components;
@tailwind utilities;

a {
    @apply cursor-pointer;
}