Developers working with ShadCN v4 and Tailwind CSS v4 noticed something odd: buttons no longer showed the pointer cursor on hover. For many, this broke expectations. Clicking a button without the familiar hand cursor felt... off.
A github issue was opened but the change wasn’t a bug. It was a deliberate design choice buttons now use the default cursor by design.
The Fix
Workarounds by @aow3xm and @Koda-Pig
@layer base {
button:not([disabled]),
[role="button"]:not([disabled]) {
cursor: pointer;
}
}
This custom CSS restores expected behavior, with added care to avoid pointer cursors on disabled buttons.
The reason.. i think.
A UX StackExchange thread explains: originally, GUI buttons relied on visual affordances (like shadows) rather than cursors to suggest interactivity. The pointer cursor was reserved for hyperlinks. Even today, native buttons in OSs typically don’t change to a hand cursor.
But web apps are not traditional GUIs they’re hybrid interfaces that mix form and function. Users now expect visual cues like cursor changes for all clickable elements.
TL;DR: Tailwind v4 removed cursor: pointer from buttons by default. It’s intentional, rooted in legacy UX logic. But if your users expect a hand cursor, just add a small CSS override.
Top comments (9)
Insane how a tiny thing like the cursor can throw me off so much lol, gotta have that hand or my brain freaks out
Yeahh, i wish theyd consult with the community first before shipping it, cause just as expressed it feels like a breaking change to me.
Interesting design choice! Glad there’s an easy fix to bring back the pointer cursor Pink Rave Outfits — users definitely expect that visual feedback today.
all thanks to open source community and css <3
But this is how we are wired up now... Button without cursor pointer seems incomplete
Yeah i agree, how would you even explain this to other people like PM,QA users and stuff.
Your code looks good, but I personally prefer doing it like this:
Nice, thanks for sharing this way to fix this behavior.
glad it helped you <3