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

user_1215142 0
Viewed 741

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.

chrome styles

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

tailwind-css
2 Answers

Have you tried

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

a {
    @apply cursor-pointer;
}
user_99447860

I was going crazy knowing that the tailwind playground was working and my project was not. So, I tailwind to the latest version and it worked like a charm.

user_12151420
Related