Uma breve explicação:

"Recentemente", o Tailwind atualizou para a versão 4 e trouxe algumas mudanças. Me deparei com um "problema": eu precisava que o efeito de hover funcionasse no mobile, mas simplesmente não estava funcionando. O motivo? Na nova versão do Tailwind, essa ação não funciona em dispositivos com touch, porque o comportamento nos dispositivos móveis não é o mesmo que no PC. Por exemplo, no PC, ao passar o mouse, o efeito de hover fica ativo até você tirar o mouse. No celular, o evento fica ativo até você clicar em outra parte da tela.

Felizmente, depois de ver a documentação deles, consegui entender. No entanto, pesquisei na web e não encontrei muita coisa sobre isso. Só fui realmente encontrar a solução na documentação oficial da biblioteca. Por isso, estou escrevendo aqui, quem sabe eu ajudo alguém! Kkkk.

foto:

https://i.ibb.co/WWyz27Ck/image-1.png

solução:

implemente no seu css principal: @custom-variant hover (&:hover);