Tailwind Scale

The scale utility class in Tailwind CSS allows you to apply scaling transformations to elements. It provides a convenient way to resize and adjust the size of elements on the web page.

Applying Scale Transformations

To apply a scale transformation to an element, you can use the scale-{value} utility class, where {value} represents the desired scaling factor. The available values range from 0 to 100, allowing you to scale elements up or down.

Here's an example:

<div class="scale-50">
  <!-- Content here -->
</div>
<div class="scale-100">
  <!-- Content here -->
</div>
<div class="scale-125">
  <!-- Content here -->
</div>

Preview

Responsive Scale Transformations

Tailwind CSS allows you to apply scale transformations responsively at different breakpoints. To use responsive scale classes, you can append the breakpoint prefix to the utility class. For example, md:scale-90 applies a scale transformation to the element starting from the medium breakpoint and above.

<div class="scale-100 md:scale-90">
  <!-- Content here -->
</div>

In the above example, the element is initially scaled to its original size with the scale-100 class, but starting from the medium breakpoint and above, it is scaled to 90% of its original size.

Combining Scale Transformations

You can combine scale transformations with other utility classes in Tailwind CSS to achieve more complex visual effects. For example, you can combine the scale class with the hover class to apply a scale transformation on hover:

<button class="transform scale-90 hover:scale-100">
  <!-- Button content here -->
</button>

In the above example, the button is initially scaled to 90% of its original size, but when hovered over, it returns to its original size.

Tailwind Scale Class Table

Windframe Tailwind blocks

landing page