[bug]: Cursor pointer not working when hovering on button in Tailwind v4

[aow3xm]

Describe the bug

Description

When I hover over a button, the cursor does not change to a pointer as expected. This issue occurs in my Next.js 15 project using ShadCN v4. I also checked the https://v4.shadcn.com/#button, and the same issue is present there. The cursor does not display as a pointer when hovering over buttons.

Affected component/components

Button

How to reproduce

1. Set up a Next.js 15 project.
2. Install and configure ShadCN v4.
3. Add a button component using ShadCN's button implementation.
4. Hover over the button.
5. Observe that the cursor does not change to a pointer.

Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/8jqnnq

Logs

System Info

1. Framework: Next.js 15
2. ShadCn: v4
3. Browser: Tested on Chrome, Edge
4. OS: Windows 11

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[samialdury]

This is expected, as mentioned on the v4 page:

Buttons now use the default cursor.

[shahriar-shojib]

I would like to know more about this decision process, is it no longer cool to have cursor: pointer on button nowadays, or what? Am I missing something here? Does this conform to some HTML spec?
If anyone has more information on this please let me know.

[Jungzl]

https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default

[aow3xm]

They just removed cursor pointer in Tailwind v4, so I had to add custom CSS to globals.css

@layer base {
  button, [role="button"] {
    cursor: pointer;
  }
}

[Koda-Pig]

@aow3xm thanks for sharing that snippet. I would add this to ensure you don't get pointers on disabled buttons:

@layer base {
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

[EnzoPV25]

This is a really strange behavior. I expect my users to see they are hovering a button with their cursor changing. It's the most common practice, and even when browsing shadcn documentation, buttons are still showing this cursor pointer :(

[EnzoPV25]

https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default

Thank's for this, very instructive.

However I truly think that having an option to keep the old behavior would be really nice since most of huge website are using pointer cursor on buttons (github, facebook, microsoft, stackoverflow, ....).

[shahriar-shojib]

Try explaining this to 99% of product managers, QA, any non techs or just run with the above mentioned hack with targeting all buttons.
I wish this decision was up for community discussion because I do consider this to be a breaking change.

[gordysc]

It'd be great if we call this out on the component examples or have them follow the default behavior. I was wondering why my local install was not matching the examples/docs until I stumbled on this

[nshen]

I don't understand, this should be reopen