Contents
Quick reference
| Class | Properties |
|---|---|
.scale-0 | transform: scale(0); |
.scale-50 | transform: scale(.5); |
.scale-75 | transform: scale(.75); |
.scale-90 | transform: scale(.9); |
.scale-95 | transform: scale(.95); |
.scale-100 | transform: scale(1); |
.scale-105 | transform: scale(1.05); |
.scale-110 | transform: scale(1.1); |
.scale-125 | transform: scale(1.25); |
.scale-x-0 | transform: scaleX(0); |
.scale-x-50 | transform: scaleX(.5); |
.scale-x-75 | transform: scaleX(.75); |
.scale-x-90 | transform: scaleX(.9); |
.scale-x-95 | transform: scaleX(.95); |
.scale-x-100 | transform: scaleX(1); |
.scale-x-105 | transform: scaleX(1.05); |
.scale-x-110 | transform: scaleX(1.1); |
.scale-x-125 | transform: scaleX(1.25); |
.scale-y-0 | transform: scaleY(0); |
.scale-y-50 | transform: scaleY(.5); |
.scale-y-75 | transform: scaleY(.75); |
.scale-y-90 | transform: scaleY(.9); |
.scale-y-95 | transform: scaleY(.95); |
.scale-y-100 | transform: scaleY(1); |
.scale-y-105 | transform: scaleY(1.05); |
.scale-y-110 | transform: scaleY(1.1); |
.scale-y-125 | transform: scaleY(1.25); |
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 ...">
Removing transforms
To remove all of the transforms on an element at once, use the transform-none utility:
<div class="scale-75 translate-x-4 skew-y-3 transform-none">
<!-- ... -->
</div>
Hover state
The utility classes supports hover states, using the following format .scale-{percentage}-{x|y}-hover. For example, use scale-125-hover to only apply the scale-125 utility on hover.
<div class="scale-125-hover">
<!-- ... -->
</div>
Edit this page on Github
Last updated on April 6, 2024