Input outlines show during transition with Tailwind 3.2.6

[xt0rted]

What version of @tailwindcss/forms are you using?

0.5.3

What version of Node.js are you using?

18.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/irT3FCtMUB

Describe your issue

Since #10385 was merged inputs that use this plugin and the transition class receive an outline ring in addition to the box-shadow ring during their transition animation.

The way to fix this is to add outline-none to the input or apply that to all inputs in your style sheet.

@tailwindcss/forms sets the input's outline style to none, but only on the :focus state. For this to not be included in the transition it needs to be set as a base input style.

This caught me off guard when updating from Tailwind 3.2.4 to 3.2.6 and I thought it was a bug in that release. After figuring out what's going on it seems like something that should probably be fixed in this plugin since it's setting a default outline style.

[smolenski-mikolaj]

This issue is also visible on Heroicons in Search all icons... input
https://heroicons.com/

[alesf]

I too noticed flickering when focus:outline-none and transition are used at the same time.
Laravel Jetstream uses this combination.

There are two ways for a temporary fix:

• remove outline-color from transition-property
• use outline-none without focus

[adamwathan]

Thanks for reporting — working on a solution to this, will have a fix out today.