Tailwindcss. Blue rectangle when click on mobile device

Question

Help pls. When I press the Button on mobile devices, a blue rectangle appears on it. How can I remove this?

<a href="#1" class="block px-4 py-2 rounded-full bg-transparent border border-dashed hover:bg-gray-200 hover:text-gray-500 hover:border-transparent hover:shadow-md active:bg-gray-300">Link button</a>

score 24 · Accepted Answer · answered Dec 09 '20 at 05:17

24

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

It works well.

answered Dec 09 '20 at 05:17

mirzo_bedil

421
3
8

1

This isn't supported in Firefox or Safari: https://caniuse.com/?search=-webkit-tap-highlight-color – Kalnode Jan 31 '22 at 13:38
Please see more complete answer here: https://stackoverflow.com/a/58165235/4378314 – Kalnode Jan 31 '22 at 20:04

Tailwindcss. Blue rectangle when click on mobile device

1 Answers1