Transition property

Class reference

# Usage

Use the transition-{properties} utilities to specify which properties should transition when they change.

<button class="transition duration-500 ease-in-out bg-blue hover:bg-red transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me
</button>

# Responsive

To change which properties of an element transition at a specific breakpoint, add a {screen}: prefix to any existing transition-property utility. For example, use md:transition-colors to apply the transition-colors utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.