Master Transitions in Tailwind v4: Duration & Delay

Last updated: 24 July 2025 • Compatible with Tailwind v4.1

This guide updates the original Tailkits post with v4-ready classes, fresh examples, and pragmatic tips drawn from official docs and community best practices.

Why this matters

Tailwind CSS v4 introduced transition-behavior (transition-normal / transition-discrete) and expanded bracket notation for custom durations and delays, making micro-animations more expressive than ever.

1. Core transition utilities recap

Tip: With bracket notation, you can now combine comma-separated values: duration-[1s,15s] sets different times for entering and leaving states.

2. What’s new in v4

2.1 transition-behavior

• transition-normal – default continuous behaviour.

• transition-discrete – animates between discrete states (e.g. display: none → block) without dropping frames.

<!-- Smoothly fade AND re-flow when toggling visibility -->
<input type="checkbox" id="toggle" class="peer sr-only">
<div class="transition-discrete duration-300 opacity-0 peer-checked:opacity-100">
  Now you see me
</div>

2.2 Upgrading from v3

The official upgrade guide lists minimal breaking changes—mostly around minimum browser support (Safari 16.4+, Chrome 111+) and the removal of prefix variants. Most existing transition-* classes carry over unchanged.

3. Practical patterns

3.1 Animated CTA button

<button class="bg-indigo-600 text-white font-semibold py-3 px-6 rounded-xl
              transition-transform transition-colors duration-300 ease-out
              hover:scale-105 hover:bg-indigo-500 focus-visible:outline-4">
  Get Started
</button>

Scales on hover and respects prefers-reduced-motion if you wrap the transition classes in a media query.

3.2 Elevating cards on hover

<article class="group relative isolate rounded-2xl bg-white shadow-lg
                transition-shadow duration-300">
  <h3 class="p-6 text-xl font-bold">Tailwind v4 Cheat-Sheet</h3>
  <p class="px-6 pb-6 text-gray-600">All new classes in one place.</p>

  <!-- subtle lift -->
  <div class="absolute inset-0 -z-10 rounded-2xl
              transition-transform duration-300 ease-in-out
              group-hover:-translate-y-1 group-hover:shadow-2xl"></div>
</article>

3.3 Discrete accordion (no JS)

<details class="transition-discrete duration-500 open:animate-pulse">
  <summary class="cursor-pointer font-medium">Why v4?</summary>
  <p class="mt-2 text-gray-700">
    Discrete transitions make opening & closing accordions smoother.
  </p>
</details>

3.4 React state toggle

export default function FadePanel({ open }) {
  return (
    <div
      className={`transition-opacity duration-700 ease-in-out
                 ${open ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
    >
      {/* … */}
    </div>
  );
}

React, Vue, and Angular all work with Tailwind’s class toggling—no extra libraries required.

4. Animations vs. transitions

Use a transition when you’re interpolating between two values (e.g. background-color blue→green).
Use an animation for repeating or key-framed motion (spinners, bounces).

Common animation classes:

5. Performance & accessibility checklist

1. Stick to GPU-friendly properties (opacity, transform) whenever possible.

2. Reduce motion: wrap transitions in @media (prefers-reduced-motion: reduce) and disable them.

3. Batch animations to avoid forced reflows; avoid animating width/height unless they’re explicit px values.

6. Troubleshooting quick fixes

7. Next steps

• Grab 581+ ready-made Tailkits blocks—all updated for Tailwind v4.

• Explore the upgraded animation API to create custom keyframes (theme.extend.animation).

FAQ

How do I add a transition to a hover effect in Tailwind CSS?

To add a transition to a hover effect, apply the appropriate transition class to your element, like transition-colors for color changes. Then define the hover state using Tailwind's hover: prefix. For example: "transition-colors duration-300"

Can I customize the duration of transitions in Tailwind?

Yes! Tailwind provides duration classes like 'duration-75', 'duration-150', 'duration-300', and more. If you need custom durations, you can define them in your 'tailwind.config.js' file.

What are the different timing functions available in Tailwind?

Tailwind includes timing function classes like 'ease-linear', 'ease-in', 'ease-out', and 'ease-in-out'. These control how the speed of the transition changes over its duration.

How can I delay a transition in Tailwind CSS?

Add a delay using the 'delay-{amount}' classes, such as 'delay-150' or 'delay-500'. This sets the time before the transition starts, in milliseconds.

Can I set custom durations or delays without editing tailwind.config.js?

Yes. v4 introduces bracket notation: duration-[750ms], delay-[1.2s], or even multiple values like duration-[1s,15s] to specify separate enter/leave times.

How do I enable discrete transitions in Tailwind v4?

Use the transition-discrete class (or its opposite, transition-normal) to animate properties that switch between distinct states—such as display: none ⟷ block—without dropping frames.

What’s the practical difference between transition-discrete and a normal transition?

transition-discrete waits until the end of the frame to flip a value (useful for visibility toggles), whereas a normal transition interpolates continuously between numeric values such as opacity or transform.

Which properties are safest to animate for performance?

Stick to GPU-friendly properties such as opacity and transform; avoid animating layout-throttling properties like width, height, or top unless necessary

When should I use a transition versus an animation class like animate-spin?

Use a transition for one-off state changes between two values (e.g., hovering a button). Reach for an animation utility (animate-spin, animate-pulse, etc.) when you need key-framed or looping motion