How to use transitions in Tailwind CSS

You know what makes the difference between a static website and one that feels polished? Transitions.

Those smooth animations when you hover over a button, when a modal slides into view, or when colors shift on interaction. They're everywhere in modern web design, and for good reason.

Tailwind CSS gives you all the tools to add these smooth transitions without writing a single line of custom CSS. Let me show you how it works.

Starting with the basics

At its core, a transition needs two things: which properties should animate, and how long the animation should take.

Tailwind gives you the transition class as your starting point. Pop it on any element and it'll smoothly animate changes to common properties like colors, shadows, and transforms.

```html

  Hover me

```

See how the background color smoothly fades from one blue to another? That's the transition class doing its magic. Without it, the color would just snap to the new value instantly.

Controlling which properties transition

Sometimes you don't want everything to transition. Maybe you only want colors to animate, or just opacity changes.

Tailwind has specific classes for this:

• transition-colors - Only transitions color properties
• transition-opacity - Only transitions opacity
• transition-transform - Only transitions transforms like scale and rotate
• transition-all - Transitions everything (use sparingly, can hurt performance)

Here's a practical example showing the difference:

```html

  
    Colors Only
  
  
    Transform Only
  
  
    All Properties
  

```

The first button only animates its color change. The scale happens instantly. The second button does the opposite. And the third button animates both smoothly.

Adjusting transition duration

The default transition speed is 150 milliseconds. Sometimes that's too fast, sometimes too slow.

You can control the speed with duration classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, and duration-1000.

The number represents milliseconds, so duration-500 means half a second.

```html

  
    Fast (75ms)
  
  
    Medium (300ms)
  
  
    Slow (1000ms)
  

```

Hover over each button and feel the difference. The fast one snaps quickly, the slow one takes its time. Most of the time you'll want something in the 200-500ms range.

Making transitions feel natural with easing

Duration isn't everything. The way something speeds up and slows down during the transition matters too. That's called easing.

Tailwind gives you these easing options:

• ease-linear - Constant speed throughout
• ease-in - Starts slow, ends fast
• ease-out - Starts fast, ends slow
• ease-in-out - Starts slow, speeds up, slows down at the end

```html

  

    

    
Linear
  
  

    

    
Ease In
  
  

    

    
Ease Out
  
  

    

    
Ease In Out
  

```

Hover over each box and watch how they move differently. Most UI transitions feel best with ease-out or ease-in-out because they feel more natural.

Adding delays to create sequences

Sometimes you want a slight pause before the transition starts. Maybe you're creating a staggered animation effect, or you want to avoid accidental triggers.

Use delay classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, and delay-1000.

```html

  

    No delay
  
  

    150ms
  
  

    300ms
  
  

    500ms
  

```

Hover over each box. Notice how the later boxes wait a bit before starting their transition. This creates a nice cascading effect when used on multiple elements.

Real world examples

Let me show you some practical patterns you'll use all the time.

Card hover effects:

```html

  
  

    
Product Card
    
Hover over this card to see the smooth lift effect with enhanced shadow.
  

```

Button with multiple transition effects:

```html

  Click me

```

Toggle switch with transitions:

```html

  
  

  


```

Custom transition values

Need a specific duration or timing that Tailwind doesn't provide? Use arbitrary values with bracket notation.

For a 2-second transition: duration-[2000ms] or duration-[2s]

For a custom cubic-bezier curve: ease-[cubic-bezier(0.95,0.05,0.795,0.035)]

```html

  Custom transition

```

This button has a bouncy 2-second animation with a custom easing curve. Pretty wild, right?

Respecting user preferences

Some people get motion sick from animations. Browsers let users indicate they prefer reduced motion, and Tailwind respects that.

Use the motion-reduce: prefix to provide alternative styles:

```html

  Accessible button

```

Users with motion sensitivity won't see the scaling animation, but the button still works perfectly.

And there you have it. Transitions in Tailwind CSS are straightforward once you understand the pieces: which properties to animate, how long it should take, the easing curve, and any delay.

Start simple with the transition class and build from there. Your interfaces will feel so much more polished with just a few utility classes.

Play around with the examples, mix and match different durations and easing functions, and you'll quickly develop an intuition for what feels right.

Happy coding!