Weird flash on input focus

[captenmasin]

I'm not sure if this is actually an issue but I've noticed with my inputs (text and buttons) I get this weird flash on focus?

Mar-05-2021.2-40-49.pm.mp4

Classes:

    flex items-center px-4 py-2 mx-auto text-sm font-medium transition-all rounded-lg w-full justify-center
    group pl-12 pr-4
    focus:outline-none
    focus:ring-0

Has anyone else experienced this?

[simonswiss]

Hey!

This is because you're using the transition-all transition property class, which will transition every CSS property over the default duration (150ms).

So, basically your outline-none transitions over 150ms as well, hence the weird flash you see when entering/leaving focus.

You probably want to change this to something like just transition, or one of the other values.

Hope that makes sense 👍

[captenmasin]

Ooooh that was exactly it! Thank you so much, that's fixed it <3