Tailwind Translate
Tailwind translate is used to move an HTML element along the x-axis and y-axis.
This can be useful for creating animations, positioning elements on a page, or making adjustments to the layout of a website.
The translate utility works by using the CSS transform property to move an element from its original position.
As we proceed through this article, we will gain a deeper understanding of Tailwind translate property and its classes with examples.
The amount of translation can be specified using different classes in Tailwind.
It can be used in a variety of ways to create simple or complex animations and effects, making it a valuable tool in any web developer’s toolkit.
Tailwind Translate Classes
Below is a detailed explanation of Tailwind translate classes:
| Classes | Overview |
| translate-x-0 | Elements are moved along the horizontal axis by zero pixels, meaning they do not move at all. |
| translate-y-0 | Elements are moved along the vertical axis by zero pixels, meaning they do not move at all. |
| translate-x-px | In this case, the elements move along the x-axis by 1px. |
| translate-y-px | Using this class, the elements move along the y-axis by 1px. |
| translate-x-0.5 | This class is used to move an element along the x-axis by 0.125rem or 2px. |
| translate-y-0.5 | This class helps in moving an element vertically by 0.125rem or 2px. |
| translate-x-1 | The elements move horizontally by 0.25rem or 4px. |
| translate-y-1 | This class ensures that an element moves along the y-axis by 0.25rem or 4px. |
| translate-x-1.5 | By using this class, the elements move 0.375rem or 6px along the x-axis. |
| translate-y-1.5 | This class moves the elements by 0.375rem or 6px along the y-axis. |
| translate-x-2 | It moves elements along the x-axis by 0.5rem or 8px when using this class. |
| translate-y-2 | With this class, the elements move 0.5rem or 8px along the y-axis. |
| translate-x-2.5 | It moves the elements by 0.675rem or 10px along the x-axis. |
| translate-y-2.5 | This class moves the elements by 0.675rem or 10px along the y-axis. |
| translate-x-3 | Elements using this class move by 0.75rem or 12px along the x-axis. |
| translate-y-3 | In this case, the elements move by 0.75rem or 12px along the y-axis. |
| translate-x-3.5 | Using this class, the elements move horizontally by 0.875rem or 14px. |
| translate-y-3.5 | This class is used to move the elements vertically by 0.875rem or 14px. |
| translate-x-4 | This class helps in moving an element horizontally by 1rem or 16px. |
| translate-y-4 | This class moves the elements by 1rem or 16px along the y-axis. |
| translate-x-5 | It moves the elements along the x-axis by 1.25rem or 20px. |
| translate-y-5 | With this class, the elements move along the y-axis by 1.25rem or 20px. |
| translate-x-6 | In this case, the elements move horizontally by 1.5rem or 24px. |
| translate-y-6 | Using this class, the elements move horizontally by 1.5rem or 24px. |
| translate-x-7 | The element using this class moves horizontally by 1.75rem or 28px. |
| translate-y-7 | By using this class, the element moves vertically by 1.75rem or 28px. |
| translate-x-8 | This class ensures that an element moves 2rem or 32px along the x-axis. |
| translate-y-8 | Elements using this class move 2rem or 32px along the y-axis. |
| translate-x-9 | This class is used to move an element horizontally by 2.25rem or 36px. |
| translate-y-9 | With this class, elements move along the y-axis by 2.25rem or 36px. |
| translate-x-10 | Using this class, an element moves 2.5rem or 40px along the x-axis. |
| translate-y-10 | It gives an element a y-axis movement of 2.5rem or 40px. |
| translate-x-11 | This class guarantees that an element moves horizontally by 2.75rem or 44px. |
| translate-y-11 | By using this class, an element moves vertically by 2.75rem or 44px. |
| translate-x-12 | It moves an element along the x-axis by 3rem or 48px. |
| translate-y-12 | An element is moved along the y-axis by 3rem or 48px. |
| translate-x-14 | This class helps in moving an element along the x-axis by 3.5rem or 56px. |
| translate-y-14 | An element can be moved along the x-axis by 3.5rem or 56px. |
| translate-x-16 | By using this class, you can move an element along the y-axis by 4rem or 64px. |
| translate-y-16 | Moving an element along the y-axis by 64px or 4rem is made possible by this class. |
| translate-x-20 | This class is used to move an element by 5rem or 80px along the x-axis. |
| translate-y-20 | Used to move an element by 5rem or 80px along the y-axis. |
| translate-x-24 | This class is utilized to move an element 6rem or 96px along the x-axis. |
| translate-y-24 | An element is moved along the y-axis by 6rem or 96px. |
| translate-x-28 | This class ensures that an element moves 7rem or 112px along the x-axis. |
| translate-y-28 | Using this class, an element moves vertically by 7rem or 112px. |
| translate-x-32 | In this case, an element moves along the x-axis by 8rem or 128px. |
| translate-y-32 | By using this class, an element moves 8rem or 128px along the y-axis. |
| translate-x-36 | Used to move an element by 9rem or 144px along the x-axis. |
| translate-y-36 | This class moves an element by 9rem or 144px along the y-axis. |
| translate-x-40 | Using this class, an element moves an element 10rem or 160px along the x-axis. |
| translate-y-40 | In this case, an element moves an element by 10rem or 160px. |
| translate-x-44 | This class is utilized to move an element 11rem or 176px along the x-axis. |
| translate-y-44 | Elements using this class moves an element 11rem or 176px along the y-axis. |
| translate-x-48 | With this class, an element moves an element by 12rem or 192px. |
| translate-y-48 | Used to move an element by 12rem or 192px along the y-axis. |
| translate-x-52 | It moves an element along the x-axis by 13rem or 208px. |
| translate-y-52 | This class is used to move an element vertically by 13rem or 208px. |
| translate-x-56 | Moving an element along the x-axis by 224px or 14rem is made possible by this class. |
| translate-y-56 | Moving an element along the x-axis by 224px or 14rem is achieved using this class. |
| translate-x-60 | The element using this class is moved horizontally by 15rem or 240px. |
| translate-y-60 | This class is used to translate an element 240px or 15rem along the y-axis using this class. |
| translate-x-64 | This class ensures that an element is moved 256px or 16rem horizontally using this class. |
| translate-y-64 | Helps in moving an element 256px or 16rem vertically. |
| translate-x-72 | Used to move an element by 18rem or 288px along the x-axis. |
| translate-y-72 | This class helps in moving an element by 18rem or 288px along the y-axis. |
| translate-x-80 | In this case, an element is moved by 20rem or 320px along the x-axis. |
| translate-y-80 | Using this class, an element is moved by 20 rem or 320px along the y-axis. |
| translate-x-96 | This class is utilized to move an element by 24rem or 384px along the x-axis. |
| translate-y-96 | The element using this class is moved vertically by 24rem or 383px along the y-axis. |
| translate-x-1/2 | An element can be moved horizontally along the x-axis by half of its width using this class. |
| translate-x-1/3 | This will move the element along the x-axis by one-third of its own width. |
| translate-x-2/3 | It will move the element along the x-axis by two-thirds of its own width. |
| translate-x-1/4 | This class is used to move an element by one-fourth of its own width. |
| translate-x-2/4 | An element can be moved horizontally along the x-axis by half of its width using this class. |
| translate-x-3/4 | By doing this, we will move the element by three-quarters of its own width along the x-axis. |
| translate-x-full | This will move the element horizontally by its full width. |
| translate-y-1/2 | This will move the element along the y-axis by one-half of its own width. |
| translate-y-1/3 | This class is used to move an element by one-third of its own width along the y-axis. |
| translate-y-2/3 | By doing this, we will move the element by two-third of its own width along the y-axis. |
| translate-y-1/4 | An element can be moved horizontally along the y-axis by one-fourth of its width using this class. |
| translate-y-2/4 | This will move the element along the y-axis by one-half of its own width. |
| translate-y-3/4 | It will move the element along the y-axis by three-fourth of its own width. |
| translate-y-full | This will move the element vertically by its full width. |
Note: The above mentioned classes will apply positive translation which is towards bottom for translate-y-num classes and towards right for translate-x-num classes.
For negative translation prefix the class names with negative sign such as for translate-x-5, the negative translation class would be -translate-x-5.
For negative translations, the horizontal translation is towards the left while the vertical translation is towards the top.
Syntax
<element class="translate-x-4">...</element>
To use Tailwind translate classes apply translate-x and translate-y classes to move the element along the x-axis and y-axis, respectively.
The values for these classes can be specified in pixels or as a percentage of the element’s width or height.
The following example makes use of some translate classes in Tailwind for demonstration:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Translate Class in Tailwind</p>
<p class="font-medium my-2 text-gray-500">Hover on the images for finding the class applied</p>
<div class="bg-gray-200 w-full px-4 py-8 justify-between
grid grid-cols-2 gap-6 my-6">
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-y-5" title="-translate-y-5" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-x-9" title="translate-x-9" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-x-7" title="-translate-x-7" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-y-6" title="translate-y-6" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
</div>
</body>
</html>
In the below example, we have made use of some translate classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Translate Class in Tailwind</p>
<p class="font-medium my-2 text-gray-500">Hover on the images for finding the class applied</p>
<div class="bg-gray-200 w-full px-4 py-20 justify-between
grid grid-cols-2 gap-6 my-6">
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-y-1/3" title="-translate-y-1/3" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-x-1/2" title="translate-x-1/2" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center -translate-x-3/4" title="-translate-x-3/4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 justify-self-center translate-y-2/3" title="translate-y-2/3" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
</div>
</body>
</html>
Tailwind Translate Benefits
The Tailwind translate utility provides a number of benefits. including:
- The Tailwind translate enables you to easily position and move HTML elements without having to write custom CSS, which can save a lot of development time.
- Tailwind translate provides a consistent set of utility classes that can be used throughout a project, ensuring that all HTML elements are styled consistently across the website.
- The Tailwind translate utility provides a wide range of classes that can be used to move elements along the x-axis and y-axis in a variety of ways, giving developers a lot of flexibility in positioning and animating elements.
- The Tailwind translate utility is responsive by default, which means that elements can be positioned and moved in a way that adapts to different screen sizes and device types.
We value your feedback.
+1
+1
+1
+1
+1
1
+1
+1
