Animation disable for part of class

[StevenVerheyen]

Hi!

Is it possible to have animation on some parts of classes, and disable the animation on other classes?

Here is an example of an input field that I have. What I try to do here is to animate hover and focus effect. What I try to disable is the focus:outline-none. Because this is animated, I get a weird UI glitchy feeling.

(what this input field has, is an orange border - reason to disable outline)

<input type="text" id="form-name" placeholder="Name" class="w-full h-10 px-3 text-white bg-white transform duration-250 bg-opacity-20 hover:bg-opacity-25 focus:bg-opacity-35 placeholder-gray-300 border-2 border-transparent focus:outline-none focus:ring-1 focus:border-yellow-600" style="caret-color:orange;" required />

Is there a possibility to do this? Or do I need to structure my code in a different way to achieve this?

Thanks in advance!

[simonswiss]

Hey!

I think you could apply outline-none instead of focus:outline-none, to achieve this.

Also, from the code you shared, you need the class transition instead of transform for it to work properly.

Finally, you can achieve the orange border as the focus ring by doing focus:ring-2 focus:ring-yellow-600, although there is nothing wrong with using a border colour on focus.

Here's a quick Tailwind Play example: https://play.tailwindcss.com/hefkY1iTqD

[StevenVerheyen]

That indeed did the trick! I guess I need to read the documentation carefully about the animation parts :)
Thank you very much!