Create transition with TailwindCSS

<div class="flex w-32 h-12 bg-teal-700 hover:bg-teal-100 hover:w-40 transition-all duration-1000 ease-in-out">
Test
</div>

With CSS transitions, you can smoothly change the values of properties over a specified duration. For example you can change the background color, the size or shadow of an div element on mose over event.

You can fine tune the transition in pure CSS with the following properties:

• transition-property - What CSS property to change
• transition-duration - How long should the animation be
• transition-delay - When to start the animation
• transition-timing-function - How the speed curve should look like

With TailwindCSS you can use the predefined values or use arbitrary values in special cases.

• transition-{properties}
• duration-{amount}
• delay-{amount}
• ease-{timing}

For example by adding the Tailwind class transition to your element it automatically adds the following CSS rules:

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

If you want to change the size of the element then the simple transition class will not work as is doesn't handle the with and height properties. In this case you can use the transition-all class as here:

<div class="flex w-32 h-12 bg-teal-700 hover:bg-teal-100 hover:w-40 transition-all duration-1000 ease-in-out">
Test
</div>