Set -webkit-tap-highlight-color to transparent in Preflight

[zepfietje]

This PR removes the highlight over a link while it's being tapped.

For many, the blue highlight over a link on mobile is unexpected and personally I disable it on every project. There's also some bigger projects I know of that set the highlight color to transparent. In my opinion it would be good to have this as a default in Preflight. I'm open to discussion though, if you think this is a bad idea.

For reference, this has been requested in several discussions here as well:

• Tap highlight color CSS property should be added to remove blue tap box in mobile view. #2984
• Blue rectangle when click on mobile device. #3023
• customize -webkit-tap-highlight-color #6122

[mirzobedil]

Of course, this is very useful.

[adamwathan]

Hey thanks for the PR! I did some looking around and it seems like people are somewhat divided on this in the web dev community:

necolas/normalize.css#23

If we add this by default, it will be difficult for the people who don't want it to bring back the browser default behavior, so going to say no to this for now.

If you want to add this for your own projects of course you can, just a line of CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

Thanks though!

[zepfietje]

Thanks for diving in, @adamwathan!

I'm aware I can just add it to my own projects, but I thought it might have a place in Tailwind CSS by default.
However, I totally understand your consideration!

[ghost]

I think the majority would want the tap highlight to be removed by default.

[LucasOe]

It looks like this has been added in #12299.

[zepfietje]

Yay, thanks for notifying here, @LucasOe!