Disable tap highlights on iOS

[thecrypticace]

Here we're adding -webkit-tap-highlight-color: transparent; to disable tap highlights on iOS.

This means that the brief gray overlay that appears when tapping links or buttons will not anymore.

Before

with.highlight.mov

After

without.highlight.mov

If you want to re-enable the tap highlight in your own project you can do so by adding a rule to revert it to the original value:

@layer base {
  html,
  :host {
    -webkit-tap-highlight-color: revert;
  }
}

[oncet]

This also applies to Android, right?

[thecrypticace]

It does (at least in Chrome)

[babakfp]

Why is this added? That tap highlight is an accessibility/UX thing. This means by default all websites built with TailwindCSS are now less accessible!

@adamwathan, what changed? #9050 (comment)

[BenHerbst]

I hate this, i wondered why it got removed in my website and then i found this pr ...

[mmikkel]

I agree with the above comments. Tap highlights being removed by default is an accessibility issue.

[hichemfantar]

I agree that this makes tailwind less accessible by default.