Tailwind CSS Translate

The translate utility allows you to move an element on the x-axis and/or y-axis, similar to the transform: translate() property in regular CSS.

Syntax

The syntax for using translate utility in Tailwind CSS is as follows:

<div class="translate-x-/*value*/ translate-y-/*value*/"></div>

Here, translate-x-/*value*/ and translate-y-/*value*/ are the classes for translating an element on the x-axis and y-axis respectively. Replace /*value*/ with the desired value for your use case.

Example

Let's say we want to move an element 20px to the right and 10px to the bottom. We can use the translate utility like so:

<div class="translate-x-20 translate-y-10">This div is translated 20px right and 10px down.</div>

Output

The above example will render an element that has been moved 20px to the right and 10px down.

Explanation

The translate utility moves an element on the x-axis and/or y-axis relative to its current position. Positive values for translate move the element to the right and negative values move it to the left. Similarly, positive values for translate-y` move the element down and negative values move it up.

Use

The translate utility is a convenient way to move an element on the page without changing its layout or affecting other elements.

Use it to:

• Position elements precisely where you want them.
• Create animations and transitions that move elements smoothly on the page.

Important Points

• The translate utility only moves an element on the page without affecting its layout or other elements.
• Use positive values for translate-x to move an element to the right and negative values for translate-x to move it to the left.
• Use positive values for translate-y to move an element down and negative values for translate-y to move it up.

Summary

The translate utility allows you to move an element on the x-axis and/or y-axis relative to its current position. Use it to position elements precisely where you want them or create animations and transitions that move elements smoothly on the page. Positive values for translate-x move the element to the right, negative values move it to the left. Positive values for translate-y move the element down, negative values move it up.