Why Are Buttons Losing the Pointer Cursor? The ShadCN and Tailwind Debate

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.

Apr 22, 2025 - 01:07

Why Are Buttons Losing the Pointer Cursor? The ShadCN and Tailwind Debate

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.