is now part of Shuffle™. The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI.
Switch to Shuffle →
← Tailwind CSS classes list

Tailwind CSS class: .transition / .transition-*

<button class="transition-none duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">None</button>

<button class="transition-all duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">All</button>

<button class="transition duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Default</button>

<button class="transition-colors duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Colors</button>

<button class="transition-opacity duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Opacity</button>

<button class="transition-shadow duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Shadow</button>

<button class="transition-transform duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Transform</button>

Preview

CSS source

.transition-none { transition-property: none; }
.transition-all { transition-property: all; }
.transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-shadow { transition-property: box-shadow; }
.transition-transform { transition-property: transform; }

More in Tailwind CSS Animation