1

I am trying to use the cursor utility, my code is as following:

<button className="border-8 cursor-pointer bg-primary w-max flex gap-2 text-white py-4 px-6 text-2xl font-semibold">
  See Music Plans
  <ArrowUpRight className="w-8 h-8" />
</button>

But the cursor only changes when hovered over the absolute edges, but doesn't when I move inside it.

I also checked the documentation(https://tailwindcss.com/docs/cursor), it has the same issue.

Additionally, I checked it out in the playground, it has the same issue https://play.tailwindcss.com/wjr3eqOnsc

I looked further into the issue and it seems like the cursor change doesn't work even though I apply vanilla CSS to change it. After looking into the issue a bit, I was convinced that it had nothing to with tailwind but the issue lies in the browser I guess. I check the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

I found out a weird behaviour the default cursor changes when the cursor is first place in the area, and then scrolled without moving the cursor. If I move the cursor even by a bit, it changes to default. Have any of you faced this before? Also, I am on macOS. How do I fix this issue?

EDIT: I am using macOS Sequoia version 15.6. I checked on Chrome Version 138.0.7204.184 and Safari Version 18.6

Improve this question
5
  • I checked the playground too, and it looks correct to me. The cursor changes to a crosshair when I move inside it. (I'm using chrome browser in Windows OS.) Commented Aug 22 at 5:41
  • 1
    Can't spot any real issue with your playground example in Chrome, Firefox or Safari (on macOS Ventura.) Commented Aug 22 at 6:08
  • Hey. I saw your post here a bit late. I'm attaching the community server link - this is most likely a browser bug: message from TailwindCSS Discrod server >> I posted the related text in an answer - I think this should be closed as a non-reproducible bug. Commented Aug 22 at 8:39
  • The question might be more precise by specifying browser versions and operating system versions, so that other developers encountering the issue can categorize it based on exact version numbers. In case of a bug, version numbers should always come first. They are essential for accurate reproduction, whether it concerns a browser, software, package, or anything else. Commented Aug 22 at 9:00
  • Just a small note - I recently noticed it on the Ko-fi page. After loading, the site still does some background work, and if you move the cursor back over a pointer button in the meantime, it flickers (pointer/default/pointer/default/...) before finally settling on the pointer. Commented Aug 22 at 11:40

2 Answers 2

Reset to default
1

Since TailwindCSS generates the expected CSS code perfectly, the issue is that the expected CSS code itself does not work properly. The expected CSS code is correct:

Input

<div class="cursor-pointer">...</div>

Generated CSS (check yourself: Playground)

.cursor-pointer {
  cursor: pointer;
}

Since the syntax is correct and other overrides can be ruled out, the only remaining explanation is: a browser bug.

Some external sources mentioning a similar browser bug in Safari:

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Sorry for the unusual links, they're really just stories similar to yours. I think you should file a report including your browser version and operating system version.
0

I have solved the issue using the old school method of restarting my laptop. It had been runinng for 13 days. When I restarted it now the cursor works perfectly.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.