Transforms

Scale

Utilities for scaling elements with transform.

Quick reference

Class	Description
scale-{percentage}	transform: translateX({percentage}) transform: translateY({percentage})
scale-x-{percentage}	transform: translateX({percentage})
scale-y-{percentage}	transform: translateY({percentage})

Available values
{percentage}: Accepts any percentage value.

Basic usage

Scaling an element

Use the scale-{percentage}, scale-x-{percentage}, and scale-y-{percentage} utilities to scale an element.

scale-75

scale-100

scale-125

<img class="scale-75 ...">
<img class="scale-100 ...">
<img class="scale-125 ...">

Using negative values

To use a negative scale value, prefix the class name with a dash to convert it to a negative value.

<img class="-scale-50" />

Removing transforms

To remove all transforms on an element at once, use the transform-none utility. This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

<div class="scale-75 translate-x-16 skew-y-16 md:transform-none"></div>

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:scale-125 to only apply the scale-125 utility on hover.

<div class="hover:scale-125"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:scale-125 to apply the scale-125 utility at only medium screen sizes and above.

<div class="md:scale-125"></div>