Don't use cursor: pointer for buttons by default
#8962
Conversation
This is a pretty common expectation but as outlined in in #8961 isn't really right. We considered this a long time ago but it felt too against the grain at the time. These days though very UI-forward applications like [Linear](https://linear.app/) are using the default cursor for buttons and I think this trend will continue as more people become aware that `cursor: pointer` is meant for links. Let's update our defaults here to help nudge people in this direction and make it more common. If people want to change this in their own apps, it's just a line or two of CSS to add to their projects.
This reverts commit ed3a4f3.
|
@thecrypticace why the commit of this pr has been reverted? |
|
Ah because we wanted to remove it to push out 3.1.7 and when I reverted the commit I forgot to update the Changelog to put it in the "unreleased" section. Sorry about that. |
|
Ok thanks for clarifying 🙏 |
We’re undecided on whether or not this should be released right now so we’ll revert it and revisit it later.
|
Any estimation of when this will be released? |
|
I would love to see this. As a Tailwind user, I expect Tailwind to use the absolute best practices by default, so leaving |
Related to #8961 and #8962 Before v4, buttons got this CSS in preflight: https://github.com/tailwindlabs/tailwindcss/blob/9824cb64a03afaa405e184cb31003c8a1efafaa7/src/css/preflight.css#L339-L353 v4 (`next` branch) no longer has `cursor: pointer` in [preflight.css](https://github.com/tailwindlabs/tailwindcss/blob/2fe249963583e436961adc59cf9988af454e3da5/packages/tailwindcss/preflight.css) This PR removes additional CSS for `:disabled` buttons. It was meant to undo an override that is no longer present.
|
Linear no longer uses default for buttons, now they are using pointer again. Shadcn/ui v4 has a lot of 'likes' into the bring back cursor issue (this tweet alone has 600 likes https://x.com/shadcn/status/1915038859529949498). I think this was a big mistake. People with less attention will ship worse and less accessible web apps. |
Related to tailwindlabs#8961 and tailwindlabs#8962 Before v4, buttons got this CSS in preflight: https://github.com/tailwindlabs/tailwindcss/blob/9824cb64a03afaa405e184cb31003c8a1efafaa7/src/css/preflight.css#L339-L353 v4 (`next` branch) no longer has `cursor: pointer` in [preflight.css](https://github.com/tailwindlabs/tailwindcss/blob/2fe249963583e436961adc59cf9988af454e3da5/packages/tailwindcss/preflight.css) This PR removes additional CSS for `:disabled` buttons. It was meant to undo an override that is no longer present.
This is a pretty common expectation but as outlined in in #8961 isn't really right. We considered this a long time ago but it felt too against the grain at the time. These days though very UI-forward applications like Linear are using the default cursor for buttons and I think this trend will continue as more people become aware that
cursor: pointeris meant for links.Let's update our defaults here to help nudge people in this direction and make it more common. If people want to change this in their own apps, it's just a line or two of CSS to add to their projects.
Closed #8961.