Cursor pointer not showing in buttons with Tailwind v4
Issue
I’m using Shadcn and after updating to Tailwind version 4 all buttons started not showing the pointer cursor, they now show the default cursor when I hover on them. I’m checking if the cursor style was overridden somewhere but I couldn’t find any cursor style at all in the button CSS.
I’m using the buttons like this, with no extra classes. Can you help me find a solution?
import { Button } from "@/components/ui/button";
export function ButtonExample() {
return <Button>Button</Button>
}
Solution
This issue has been introduced with the Tailwind CSS v4 update and is documented here
Buttons now use the default cursor.
This change has been introduced by Tailwind team to better align with browser defaults
You can fix it by adding CSS for all buttons in global.css as it’s suggested on tailwind v4 upgrade guide
@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}