Examples

Using the spacing scale

Use translate-<number> utilities like translate-2 and -translate-4 to translate an element on both axes based on the spacing scale:

Using a percentage

Use translate-<fraction> utilities like translate-1/4 and -translate-full to translate an element on both axes by a percentage of the element's size:

Translating on the x-axis

Use translate-x-<number> or translate-x-<fraction> utilities like translate-x-4 and translate-x-1/4 to translate an element on the x-axis:

Translating on the y-axis

Use translate-y-<number> or translate-y-<fraction> utilities like translate-y-6 and translate-y-1/3 to translate an element on the y-axis:

Translating on the z-axis

Use translate-z-<number> utilities like translate-z-6 and -translate-z-12 to translate an element on the z-axis:

Note that the translate-z-<number> utilities require the transform-3d utility to be applied to the parent element.

Using a custom value

Use the translate-[<value>] syntax to set the translation based on a completely custom value:

<img class="translate-[3.142rad] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the translate-(<custom-property>) syntax:

<img class="translate-(--my-translate) ..." src="/img/mountains.jpg" />

This is just a shorthand for translate-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a translate utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.