Buttons have cursor: pointer by default, but should not for accessibility reasons

[MatthewSbar]

What version of Tailwind CSS are you using?

3.1.6

What build tool (or framework if it abstracts the build tool) are you using?

Vite 3.0.0 (rollup)

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/react-tailwind-qds1vc?file=index.js

Describe your issue

While it's common to give <button>s cursor: pointer;, this is an anti-pattern. The CSS spec establishes that cursor: pointer indicates an element is a link.

This article has some additional justification for this. I understand many users will want to override this behavior back to the common misuse of cursor: pointer;, but Tailwind should be correct by default.

[adamwathan]

Yeah agree this is the right default, changing in #8962. Going to put this out in a patch or minor, doesn't really feel "breaking" to me.

[diegohaz]

@adamwathan Should this be re-opened since #8962 was reverted in 0a3aad9?

We’re undecided on whether or not this should be released right now so we’ll revert it and revisit it later.

[DaniGuardiola]

I second @diegohaz, this should be reopened.

[hichemfantar]

Any plans to revisit this?

[ccchapman]

Buttons should not have cursor: pointer by default.

Microsoft’s design guides talk about weak affordance:

Text and graphics links use a hand […] pointer […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link. To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else.

Apple’s Human Interface Guidelines states that the hand cursor should be used when “the content is a URL link”.

W3C User Interface guidelines says the same thing again with “The cursor is a pointer that indicates a link”.

From "Buttons shouldn’t have a hand cursor" by Adam Silver

@thecrypticace Could this issue be reopened?

[kachkaev]

The next branch does not set cursor: pointer for buttons in preflight.css. So I guess that v4 will no longer change browser defaults 🎉

In the meantime, I’ve added this to a codebase that uses TailwindCSS v3:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /*
   * TODO: Remove after upgrading to Tailwind CSS 4.0+
   * Context: https://github.com/tailwindlabs/tailwindcss/issues/8961
   */
  button,
  [role='button'] {
    cursor: default;
  }
}