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

I even had the issue on the playground you linked. On macOS, another program was the cause for me. See https://stackoverflow.com/a/35212344/860205 — Ti Hausmann, Jan 13 '22 at 15:07

score 0 · Answer 1 · answered Sep 16 '21 at 07:16

0

Have you tried

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

a {
    @apply cursor-pointer;
}

answered Sep 16 '21 at 07:16

Дөлгөөн Мөнхчулуун

47
6

I did. It added nothing to the link css properties. Really weird. – halkibsi Sep 16 '21 at 07:36

score 0 · Answer 2 · answered Sep 16 '21 at 11:43

0

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.

answered Sep 16 '21 at 11:43

halkibsi

335
2
14

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

2 Answers2