How to fix Tailwind CSS `ring` not working in iOS Safari
February 15, 2023
I was trying to use the Tailwind CSS ring classes on an <input />, but they didn’t seem to work in iOS Safari.
Finally, I figured out that you have to add the appearance-none class to the input to make the ring work!
This is because iOS adds a shadow to the input by default, and the Tailwind ring classes use a shadow under the hood. Adding appearance-none removes iOS’ default styling for the input.
<input class="appearance-none ring ring-cyan-400" />Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.