Cursor pointer not showing in buttons with Tailwind v4

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;
  }
}

Alternative #1

I ran into this exact issue when upgrading to Tailwind v4. The global CSS fix works, but I found a more targeted approach that might be better for your specific use case.

Instead of adding global styles, you can extend your button component directly:

/* In your button component CSS */
.btn {
  cursor: pointer;
}

/* Or if you're using CSS modules */
.button {
  cursor: pointer !important;
}

Or even better, add it to your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      cursor: {
        'pointer': 'pointer',
      }
    }
  }
}

This way you're not affecting all buttons globally, just the ones you specifically want to have the pointer cursor. It's a bit more work but gives you better control.

Alternative #2

We had this issue in our design system and ended up using a different approach. Instead of fighting with CSS, we just added the cursor class directly to our button components:

// components/ui/button.jsx
export function Button({ className, ...props }) {
  return (
    <button 
      className={`cursor-pointer ${className || ''}`}
      {...props}
    />
  );
}

Or if you're using the cn utility:

import { cn } from "@/lib/utils";

export function Button({ className, ...props }) {
  return (
    <button 
      className={cn("cursor-pointer", className)}
      {...props}
    />
  );
}

This is probably the most straightforward fix - just explicitly add the cursor style where you need it. No global CSS changes, no config modifications, just a simple class addition.

Alternative #3

If you're using Shadcn/ui, you might want to check if there's an updated version that handles this. I noticed that some component libraries are still catching up with Tailwind v4 changes.

You can also try using the cursor-pointer utility class directly in your JSX:

import { Button } from "@/components/ui/button";

export function ButtonExample() {
  return <Button className="cursor-pointer">Button</Button>
}

Or create a wrapper component:

const ClickableButton = ({ children, ...props }) => (
  <Button className="cursor-pointer" {...props}>
    {children}
  </Button>
);

This is a quick fix if you don't want to modify your global styles or component library. It's not the most elegant solution, but it gets the job done without any breaking changes.