Tailwind CSS - Transition Property

# Tailwind CSS: Mastering Transition Properties

The transition-property utilities in Tailwind CSS specify which CSS properties should animate when they change. Combining them with duration, delay, and easing utilities allows you to create fluid and engaging user experiences with minimal effort.

## Core Transition Property Utilities

Tailwind provides a set of intuitive classes to control the transition-property of an element. Here are the most common ones:

Class	CSS Properties & Use Case
transition	transition-property: color, background-color, border-color, ...; A sensible default that transitions a curated set of the most commonly animated properties. This is your typical go-to class.
transition-all	transition-property: all; Transitions every possible animatable property. Use with caution, as it can lead to performance issues by animating properties you didn’t intend to.
transition-colors	transition-property: color, background-color, border-color, ...; Specifically targets color-related properties. Ideal for theme changes or hover effects on buttons.
transition-opacity	transition-property: opacity; Only transitions the opacity of an element, perfect for fade-in/fade-out effects.
transition-shadow	transition-property: box-shadow; Transitions changes to an element’s box-shadow, creating smooth depth effects.
transition-transform	transition-property: transform; For animating transformations like scale, rotate, and translate.
transition-none	transition-property: none; Disables all transitions on an element. Useful for overriding a more general transition style on a specific element or state.

## Building a Complete Transition

transition-property utilities are just one piece of the puzzle. To create a full animation, you need to combine them with duration, easing, and delay utilities.

• duration-{amount}: Controls how long the transition takes (e.g., duration-300 for 300ms).
• ease-{timing}: Controls the animation’s speed curve (e.g., ease-in-out for a slow start and end).
• delay-{amount}: Adds a pause before the transition begins (e.g., delay-100).

Tailwind automatically applies a default duration of 150ms and an ease-in-out curve when you use any transition-* utility, but you can easily override these.

## Practical Application: Interactive Card

Let’s build an interactive card component that uses various transitions on hover. This example demonstrates how to combine property, duration, and transform utilities for a polished effect.

### Example: Interactive Card Component

Pro Tip: For live editing and experimentation, you can paste this code into Tailwind Play.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Transition Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white min-h-screen flex items-center justify-center font-sans">

  <div class="group relative w-72 rounded-xl bg-slate-800 p-6 shadow-lg">
    <!--
      Base transition classes are applied here.
      We define which properties can be animated, their duration, and easing function.
      The `group` class allows us to trigger hover effects on child elements.
    -->
    <div class="absolute inset-0 rounded-xl bg-blue-500 opacity-0 transition-opacity duration-500 group-hover:opacity-10"></div>

    <div class="relative">
      <h3 class="text-xl font-bold">Project Titan</h3>
      <p class="mt-2 text-slate-400 transition-colors duration-300 group-hover:text-slate-300">
        A next-generation platform for cloud development.
      </p>

      <!-- This button combines multiple transitions -->
      <button class="mt-6 w-full rounded-lg bg-slate-700 px-4 py-2 text-sm font-semibold
                   transition-all duration-300 ease-in-out
                   group-hover:bg-blue-600 group-hover:text-white group-hover:shadow-md group-hover:shadow-blue-600/50
                   transform group-hover:-translate-y-1 group-hover:scale-105">
        View Details
      </button>
    </div>

  </div>

</body>
</html>

## Accessibility and Performance

### Respecting User Preferences

Some users prefer to reduce motion due to vestibular disorders. You can respect this preference using the motion-reduce variant, which disables animations if the user has enabled this setting in their operating system.

<!-- This element will not transition if the user prefers reduced motion -->
<button class="transition hover:scale-110 motion-reduce:transition-none motion-reduce:transform-none ...">
  Hover Me
</button>

### Customizing Transition Properties

If you need to transition a property not included in the default transition utility, you can add it to your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      }
    }
  }
}