Can't override outline style

[nino-w4u]

What version of @tailwindcss/forms are you using?

v0.3.3

What version of Node.js are you using?

16.8.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/mLaNtgEjXG

Describe your issue

I'm trying to get rid of outline by adding outline-none on focus of input. But it doesn't seem to work when I add @tailwindcss/forms

[adamwathan]

Hey! The forms plugin doesn't use outline for the default focus style, it's a ring + border. So to remove the default, you'll want to do something like this:

<input type="text"
  placeholder="Custom focus style"
  class="focus:ring-0 focus:border-gray-500" />

This kinda feels weird I admit but it's the best we've got if we want focus styles to follow border radius. In practice a custom input usually ends up looking more like this:

<input type="text" class="rounded border-gray-300 focus:ring focus:ring-pink-400/50 focus:border-pink-500"/>

Live demo for example:

https://play.tailwindcss.com/2QakwKOwIV

Hope that helps!

[JuanM04]

This kinda feels weird I admit but it's the best we've got if we want focus styles to follow border radius.

This was fixed in Chrome, Firefox and Safari a few months ago. Maybe, along the new outline-* utilities, it's time to update the default styles to use outlines instead of rings

[adamwathan]

@JuanM04 Not changed in Safari yet I'm afraid:

https://play.tailwindcss.com/LkVepR7iRE

Default outlines will follow border radius, but if you actually set the outline property yourself it will always have square corners.

[JuanM04]

Oh, I didn't know that Safari behaves so weirdly. Let's wait until it supports it