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

Question

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"?

Answer 1

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;
}