Tailwindcss: Outline utilities

[m1guelpf]

How about adding a helper to add/remove outline?
I am currently facing a situation where I want to remove the focus outline of an input field and, AFAIK, there aren't utilities for this on Tailwind...

[luizbills]

outline: 0 is not recommended, it's anti-accessibility pattern.

[reinink]

@luizbills That's only if you don't implement your own custom outline, correct?

[davidhemphill]

@m1guelpf I want this as well. I think we'd want to add some good :focus utilities alongside it, so people don't just remove the outline and not provide an alternative.

@luizbills It's generally recommended to leave the outline, but if you change the look of the element on focus, it's fine.

[PILO7980]

I've build my own utility classes framework, but not as good and configurable as Tailwind, and I used somthing like :bg-primary for both :focus and :hover

It's shorter and does the job.

[wilburpowery]

+1 for this. Would still be very helpful.

[reinink]

I started hacking on new outline module today, but I'm seriously wondering if we need anything here beyond a reset (outline-none). The main issue I have with outlines is that they don't follow border radiuses, meaning you get this:

input { outline: 2px solid rgba(52,144,220,0.5) }

What I typically use in these situations is a box shadow, which DOES following the border radiuses:

input { box-shadow: 0 0 0 2px rgba(52,144,220,0.5) }

And since we already have the box shadow module setup, adding an "outline" like this is trivial:

shadows: {
  default: '0 2px 4px 0 rgba(0,0,0,0.10)',
  'outline': '0 0 0 2px rgba(52,144,220,0.5)',
  'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
  'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
  'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
  'none': 'none',
},

[benface]

@reinink Outlines follow border radiuses in Safari. Too bad other browsers don't follow suit!

There's a Chromium bug open here:
https://bugs.chromium.org/p/chromium/issues/detail?id=81556

And a Mozilla bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=315209

[reinink]

@benface Oh nice, thanks for sharing. So this _might_ get fixed some day, but in the meantime, maybe we're better pushing folks to use box-shadow instead.

[benface]

Definitely. Box-shadow is great for external borders.

[sumitwagh]

How to change input field outline color??

[zaknesler]

@sumitwagh Remove the outline with outline-none and add a border. Check out this example in the documentation.