Tailwind CSS Transition Delay

The Transition Delay utility in Tailwind CSS controls how long the browser waits before starting a CSS transition. It corresponds to the CSS transition-delay property.

delay-75: Sets the transition delay to 75 milliseconds.
delay-100: Sets the transition delay to 100 milliseconds.
delay-150: Sets the transition delay to 150 milliseconds.
delay-200: Sets the transition delay to 200 milliseconds.
delay-300: Sets the transition delay to 300 milliseconds.
delay-500: Sets the transition delay to 500 milliseconds.
delay-700: Sets the transition delay to 700 milliseconds.
delay-1000: Sets the transition delay to 1000 milliseconds (1 second).

Tailwind CSS also supports custom delay values using delay-[<value>] and CSS custom properties using delay-(<custom-property>).

Syntax

<element class="delay-{amount}">...</element>

For a custom value, use:

<element class="delay-[400ms]">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Transition Delay</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-6">
    <h1 class="text-3xl font-bold text-green-700 mb-3">
        Tailwind CSS Transition Delay
    </h1>
    <p class="text-gray-700 mb-8 text-center">
        Hover over each button to observe its transition delay.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-xl">
        <button class="rounded-lg border border-green-800 bg-green-300 p-4
                       transition delay-75 duration-300 ease-in-out
                       hover:-translate-y-1 hover:scale-105 hover:bg-green-600
                       hover:text-white">
            Delay 75ms
        </button>
        <button class="rounded-lg border border-green-800 bg-green-300 p-4
                       transition delay-100 duration-300 ease-in-out
                       hover:-translate-y-1 hover:scale-105 hover:bg-green-600
                       hover:text-white">
            Delay 100ms
        </button>
        <button class="rounded-lg border border-green-800 bg-green-300 p-4
                       transition delay-500 duration-300 ease-in-out
                       hover:-translate-y-1 hover:scale-105 hover:bg-green-600
                       hover:text-white">
            Delay 500ms
        </button>
        <button class="rounded-lg border border-green-800 bg-green-300 p-4
                       transition delay-1000 duration-300 ease-in-out
                       hover:-translate-y-1 hover:scale-105 hover:bg-green-600
                       hover:text-white">
            Delay 1000ms
        </button>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: Four green buttons are displayed in a responsive grid. When you hover over a button, its background color changes to dark green, its text becomes white, and it moves slightly upward and scales up.

Tailwind CSS Transition Delay

Syntax

Explore