Tailwind CSS 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.