Executando verificação de segurança...
1
AlexFullBrazil
1 min de leitura ·

Tailwind V4, leave my cursor alone!

Daí vem uns cagadores de regras e removem o cursor: pointer dos botões "para corresponder ao comportamento padrão do navegador" e blá, blá blá... Isso tornou a experiêcia de usuário horrível! Oxi, aqui não é mais um botão?

Padrão do navegador ou não, a necessidade sobrepôs-se à regra por mais de dez anos e todo mundo estava feliz.

Os usuários aprenderam a identificar elementos clicáveis pela mãozinha. É uma expectativa visual estabelecida que ajuda na navegação. Quando você remove isso, deixa todo mundo confuso e quebra anos de condicionamento.

O cursor pointer se tornou um padrão de usabilidade por um motivo - ele funciona! Os usuários precisam dessas dicas visuais para entender a interface.

Sacrificar a experiência do usuário em nome de "purismo técnico" é simplesmente frustrante.

Carregando publicação patrocinada...
2
user1

Para mim está faltando um pouco de contexto, você está dizendo que na versão 4 do tailwind o cursor pointer é omitido dos botões e que os mantenedores justificaram isso dizendo que é o padrão dos navegadores, é isso?

Tem algum link de referência sobre esse caso?

1
2
renant

Não entendi exatamente o que aconteceu.

Fiz upgrade para o tailwindV4 em um projeto e não percebi essa diferença, ou realmente não entendi o que você quis dizer. Pode dar um pouco mais de contexto

EDIT:

Encontrei aqui na documentação: https://tailwindcss.com/docs/upgrade-guide

Existe uma forma bem simples de solucionar pelo que vi:

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

1
AlexFullBrazil
  • Autor
    Autor

Acredito que é porque você fez um upgrade, mas em projeto novo o cursor agora é default, e o shadcn entrou na onda.

E sim, eu sei como 'solucionar o problema'.

Mas a questão é: Pra que mudar algo que já estva a tantos anos funcionando bem?

Sacrificar a experiência do usuário em nome de "purismo técnico" é simplesmente frustrante.

1
renant

Bom, acredito que está mais ligado a decisão das pessoas e comunidade que mantém o projeto.

Infelizmente quando tomamos a decisão de usar algo mantido pela comunidade, estamos a merce de decisões de terceiros

Confesso que também não entendo essa decisão

1
DanielZtimhcs

Aconteceu isso na Toolbar do Material Angular 19, removeram a cor de fundo e de uma tab bar, aquela cor azulzinha tao comum que todo mundo conhece. E olha que a tabbar ja vinha sem cor, mas você adcionava color="primary" e pronto, ela ficava na cor padrão do tema. Agora nao mais, e é um saco isso, tem que injetar css sujo pra fazer funcionar.

também nao entendo essas mudanças que mudam pra pior

1
DanielZtimhcs

Aconteceu isso na Toolbar do Material Angular 19, removeram a cor de fundo e de uma tab bar, aquela cor azulzinha tao comum que todo mundo conhece. E olha que a tabbar ja vinha sem cor, mas você adcionava color="primary" e pronto, ela ficava na cor padrão do tema. Agora nao mais, e é um saco isso, tem que injetar css sujo pra fazer funcionar.

também nao entendo essas mudanças que mudam pra pior

1
Programmer404

Antigamente era o default, e ficava mais fácil, porém não é algo tão complicado assim de lidar. Basta adicionar a classe. A única coisa que mudou é que agora você tem que fazer essa decisão.

1
caioken

A "mãozinha" é um feedback visual muito importante, não importa a tecnologia.

Seja em aplicativos Delphi, Visual Basic e Web, a mãozinha ajuda ao usuário sentir mais empatia pela aplicação e saber o que era clicávele o que não era.

1
DanielZtimhcs

e resolveram tirar. Não consigo entender também.

Outro exemplo

Aconteceu isso na Toolbar do Material Angular 19, removeram a cor de fundo e de uma tab bar, aquela cor azulzinha tao comum que todo mundo conhece. E olha que a tabbar ja vinha sem cor, mas você adcionava color="primary" e pronto, ela ficava na cor padrão do tema. Agora nao mais, e é um saco isso, tem que injetar css sujo pra fazer funcionar.

também nao entendo essas mudanças que mudam pra pior

1
cafesao

Acredito eu que a ideia é deixar o comportamento mais próximo do padrão dos navegadores — botão usa seta, link usa mãozinha. Isso ajuda na acessibilidade também, porque o pointer pode dar a entender que é um link, e não uma ação, o que pode confundir quem usa leitor de tela.

Com certeza é uma mudança de comportamento que ira confundir o usuário de primeiro momento e ira ter essa "resistência" para adicionar esse comportamento, mas foi uma implementação com fundamentos e que segue os padrões dos navegadores. mas entendo seu lado ksksksks

Ref do comentário do membro do projeto: https://github.com/tailwindlabs/tailwindcss/issues/15773#issuecomment-2612825063