Add touch-action to buttons in the Tailwind reset

[hdodov]

By default, on mobile devices, tapping quickly on a button triggers a double tap and the browser zooms in. If you have prev/next buttons for a carousel and you tap them quickly to go through the items, it makes no sense to zoom the screen. In fact, I don't see a use case where you'd want that behavior at all.

If you have a <button> element, you probably want it to execute whatever JavaScript it has attached to it (or submit a form), not zoom the screen.

I'm proposing the following addition to the Tailwind CSS reset:

button {
  touch-action: none;
}

[hdodov]

Actually, it might make more sense to have touch-action: manipulation because if you have an extra large button on the screen and you happen to swipe your finger on top of it to scroll the page - it wouldn't work.

Furthermore, MDN says (emphasis mine):

manipulation
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.

So using this, you get better UX and better perceived performance (because the browser doesn't delay the click).