Disabling the Tailwind input ring

If you’ve ever worked with Tailwind components or TailwindUI, you’ve probably come across the “focus ring”. On inputs (checkboxes, fields, etc.), this ring is shown when you’ve clicked or tabbed onto a component, indicating that you have selected it. Here’s an example:

Disabling the ring

I’ve seen myself and others try to disable this by simply calling the focus:ring-0 utility. This sort of works, but gives us this weird shadowing effect on the corners of our input:

By default, Tailwind will include this ring and an offset on certain input elements like checkboxes. If you’d rather not have this ring on all interactions, you can easily disable it:

<input type="checkbox" className="focus:ring-0 focus:ring-offset-0" />

With this, we’re able to get a nice looking checkbox, without the “ugly” looking ring:

Keeping things clean

To reduce redundancy across my project, I created a class that I can globally apply:

.without-ring {
  @apply focus:ring-0 focus:ring-offset-0;
}

Now, instead of re-defining these utilities on all of my inputs, I can use the without-ring class to achieve the desired output:

<input type="checkbox" className="without-ring" />

Keeping it accessible

Accessibility is important, but to keep it short, I won’t cover it here. Instead, this post by David Gilbertson provides a simple, framework-agnostic solution to showing the focus ring only when a user is tabbing and making it hidden otherwise.

Keeping it within Tailwind, we can use both our pre-defined without-ring class and native CSS selectors to show the ring for keyboard users, but hide it when using a mouse:

.without-ring:focus:not(:focus-visible) {
  @apply focus:ring-0 focus:ring-offset-0;
}

.without-ring:focus-visible {
  @apply ring-2 ring-offset-2;
}

// If we wanted to apply this globally, we could use native type selectors

[type="checkbox"]:focus:not(:focus-visible) {
  @apply focus:ring-0 focus:ring-offset-0;
}

[type="checkbox"]:focus-visible {
  @apply ring-2 ring-offset-2;
}