Comprehensive Guide To Tailwind Scale
In this article, we will learn how to use Tailwind scale property and its classes through some examples.
What is Tailwind Scale?
Tailwind Scale is a class that allows you to adjust the size of elements in your design in a way that is consistent and proportionate.
Instead of manually adjusting the height and width of each element, you can use the scale class to scale the element up or down while maintaining its aspect ratio.
The scale class is part of Tailwind’s transform and works by using the CSS transform property.
The scale class accepts values from 0 to 100, with 0 being completely shrunk and 100 being the original size of the element.
Table Of Content-
Tailwind Scale Classes
There are numerous utility classes available in Tailwind to scale an element:
| Classes | Overview |
| scale-0 | In the layout, this class hides an element completely by setting its vertical and horizontal scales to zero, but it still occupies space. |
| scale-x-0 | An element is hidden completely by setting its horizontal scales to zero, but it still takes up space in the layout. |
| scale-y-0 | This class is used to hide an element by setting its vertical scales to zero, but it still occupies space. |
| scale-50 | In this case, an element is scaled down to 50% of its original size in both dimensions. |
| scale-x-50 | This class ensures that an element is scaled horizontally to 50% of its original size. |
| scale-y-50 | Using this class, an element is scaled vertically by 50% of its actual size. |
| scale-75 | A scaling factor of 75% is applied to an element in both dimensions using this class. |
| scale-x-75 | An element is scaled horizontally by 75% using this class. |
| scale-y-75 | Used to vertically scale an element by 75%. |
| scale-90 | This class is used to apply a 90% scaling transformation to an element. |
| scale-x-90 | Using this class, an element is scaled 90% horizontally. |
| scale-y-90 | In this case, vertical scaling of 90% is applied to an element. |
| scale-95 | By using this class, we can scale an element by 95%. |
| scale-x-95 | An element is horizontally scaled by 95%. |
| scale-y-95 | A vertical scaling of 95% is applied to an element. |
| scale-100 | The element is not scaled up or down and original dimensions are restored. This is the default value. |
| scale-x-100 | The horizontal scaling is reset and the element occupies original width. |
| scale-y-100 | The vertical scaling of an element is set to default and the element covers its actual height. |
| scale-105 | An element is scaled by 105% using this class. |
| scale-x-105 | Using this class, an element is scaled horizontally by 105%. |
| scale-y-105 | By using this class, a vertical scaling of 105% is applied to an element. |
| scale-110 | This class is used to apply a scaling of 110% on both axes. |
| scale-x-110 | An element is scaled by 110% along the x-axis. |
| scale-y-110 | This class helps in scaling an element by 110% along the y-axis. |
| scale-125 | In this case, an element is scaled up by 125% relative to its actual size. |
| scale-x-125 | Used to horizontally scale an element by 125%. |
| scale-y-125 | This class is used to vertically scale an element by 125%. |
| scale-150 | A scaling factor of 150% is applied to an element. |
| scale-x-150 | An element is scaled by 150% along the x-axis. |
| scale-y-150 | In this case, an element is scaled by 150%, along the y-axis. |
Syntax
<element class="scale-125">...</element>
To use Tailwind Scale, you can add the scale-{percentage} class to any element in your HTML.
Let’s take a look at an example covering some scale classes used to scale elements in both dimensions.
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">Scale class in Tailwind CSS</p>
<p class="font-medium text-gray-500 my-2">Hover on the images to view the styling applied</p>
<div class="bg-gray-300 p-8 justify-between grid grid-flow-col gap-4">
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-50" title="scale-50" 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 scale-90" title="scale-90" 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 scale-100" title="scale-100" 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 scale-150" title="scale-150" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
</div>
</body>
</html>
It’s important to keep in mind that scaling an element too much can result in a loss of image quality or text legibility.
The following example is used to demonstrate scale utility classes that help in scaling of elements along a single axis:
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">Scale class in Tailwind CSS</p>
<p class="font-medium text-gray-500 my-2">Hover on the images to view the styling applied</p>
<div class="bg-gray-300 p-8 justify-between grid grid-flow-col gap-4">
<div class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-75" title="scale-75" 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 scale-95" title="scale-95" 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 scale-110" title="scale-110" 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 scale-125" title="scale-125" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)">
</div>
</div>
</body>
</html>
It’s also important to consider how scaling an element may impact the layout of your design and how it looks on different devices.
Benefits of Tailwind Scale
Using Tailwind Scale has several benefits, including:
- By using the scale class, you can ensure that elements in your design are scaled proportionally and consistently, which can help create a cohesive and polished look.
- Instead of manually adjusting the height and width of each element, you can use the scale class to quickly adjust the size of an element in a way that is easy to maintain and update.
- The scale class can be used on a variety of elements, including images, text, and containers, which gives you the flexibility to adjust the size of different elements in your design.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
