How to apply a tailwindCSS transition to only a single property (border-color instead of everything-color)?

Issue

I want that when I change the color of the border of an input the transition is smooth, but not when I change the color of the text.
Now, the transition-color class of tailwind css changes the following properties:

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

How can I make the "transition-property" attribute contain only "border-color"?

Solution

you can achieve that using the Arbitrary values like this :

<input type="text" class="m-4 border-2 border-red-500 p-4 transition-[border-color]" placeholder="some text" />

the transition-[border-color] will be generated as :

.transition-\[border-color\] {
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

the generated CSS - https://play.tailwindcss.com/FJ5PRMh11H

Answered By – Dhaifallah

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published