Tailwind Transition and Duration Classes to CSS

Tailwind Transition Utilities in CSS

Tailwind's transition classes map to the CSS transition-property, transition-duration, transition-timing-function, and transition-delay properties.

Transition Property

/* transition (most common properties) */
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;

/* transition-all */
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

/* transition-colors */
transition-property: color, background-color, border-color,
  text-decoration-color, fill, stroke;

/* transition-opacity */
transition-property: opacity;

/* transition-shadow */
transition-property: box-shadow;

/* transition-transform */
transition-property: transform;

/* transition-none */
transition-property: none;

Duration

/* duration-75 */   transition-duration: 75ms;
/* duration-100 */  transition-duration: 100ms;
/* duration-150 */  transition-duration: 150ms;
/* duration-200 */  transition-duration: 200ms;
/* duration-300 */  transition-duration: 300ms;
/* duration-500 */  transition-duration: 500ms;
/* duration-700 */  transition-duration: 700ms;
/* duration-1000 */ transition-duration: 1000ms;

Timing Function

/* ease-linear */
transition-timing-function: linear;

/* ease-in */
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

/* ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

/* ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Delay

/* delay-150 */  transition-delay: 150ms;
/* delay-300 */  transition-delay: 300ms;

A common hover effect pattern: transition-colors duration-300 ease-in-out hover:bg-blue-600 creates a smooth 300ms color transition on hover.