Tailwind CSS Translate

The Translate utilities in Tailwind CSS are used to move elements along the horizontal (X) and vertical (Y) axes. They can move an element in either a positive or negative direction without changing its original position in the document layout. In CSS, this behavior can be achieved using the CSS translate() function.

Translate Classes

translate-x-{amount}: Moves an element horizontally along the positive X-axis.
-translate-x-{amount}: Moves an element along the negative X-axis.
translate-y-{amount}: Moves an element along the positive Y-axis.
-translate-y-{amount}: Moves an element along the negative Y-axis.

Note: The translation amount can be a predefined spacing value, a percentage, or an arbitrary value such as translate-x-[30px].

Syntax:

<element class="translate-x-4">...</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 Translate Class</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-8 text-center">

    <h1 class="text-3xl font-bold text-green-700">
        Tailwind CSS Translate Class
    </h1>
    <p class="mt-2 mb-8 text-gray-700">
        Observe how each box moves from its original position.
    </p>

    <div class="mx-auto grid max-w-3xl grid-cols-1 gap-8 sm:grid-cols-2">

        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 font-semibold">translate-x-8</h2>
            <div class="flex justify-center">
                <div class="flex h-24 w-48 items-center justify-center border-2 border-dashed border-gray-400">
                    <div class="flex h-16 w-16 translate-x-8 items-center justify-center rounded-lg bg-green-500 font-bold text-white">
                        X+
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 font-semibold">-translate-x-8</h2>
            <div class="flex justify-center">
                <div class="flex h-24 w-48 items-center justify-center border-2 border-dashed border-gray-400">
                    <div class="flex h-16 w-16 -translate-x-8 items-center justify-center rounded-lg bg-blue-500 font-bold text-white">
                        X-
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 font-semibold">translate-y-8</h2>
            <div class="flex justify-center">
                <div class="flex h-24 w-48 items-center justify-center border-2 border-dashed border-gray-400">
                    <div class="flex h-16 w-16 translate-y-8 items-center justify-center rounded-lg bg-purple-500 font-bold text-white">
                        Y+
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-lg bg-white p-6 shadow">
            <h2 class="mb-4 font-semibold">-translate-y-8</h2>
            <div class="flex justify-center">
                <div class="flex h-24 w-48 items-center justify-center border-2 border-dashed border-gray-400">
                    <div class="flex h-16 w-16 -translate-y-8 items-center justify-center rounded-lg bg-orange-500 font-bold text-white">
                        Y-
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

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

Output: The example displays four colored boxes demonstrating translation in different directions. The dashed borders indicate their original layout areas.

translate-x-8: Moves the element 2rem to the right.
-translate-x-8: Moves the element 2rem to the left.
translate-y-8: Moves the element 2rem downward.
-translate-y-8: Moves the element 2rem upward.

These utilities change the visual position of an element without changing the space it occupies in the normal document layout.

Translate Classes

Explore