Tailwind gives a default blue ring to focused elements.
I'm trying to change its color but without success, it's like the default is taking over custom rules.
https://play.tailwindcss.com/52qikegG9a
Update: after some trials, removing the outline works but changing it's color resets the ring to its default current without taking into account the custom ring color:
From this tailwind issue, with Firefox it actually needs to set the outline-style
property when also setting the outline-color
.
So it needs to explicitly add the tailwind class focus:outline
as seen here https://play.tailwindcss.com/R6HQKqbo3L