Skip to main content

Scale

Utilities for scaling an element on all three axis.

ClassProperties
scale-x-0transform: scaleX(0)
scale-y-0transform: scaleY(0)
scale-z-0transform: scaleZ(0)
scale-x-50transform: scaleX(0.5)
scale-y-50transform: scaleY(0.5)
scale-z-50transform: scaleZ(0.5)
scale-x-75transform: scaleX(0.75)
scale-y-75transform: scaleY(0.75)
scale-z-75transform: scaleZ(0.75)
scale-x-90transform: scaleX(0.9)
scale-y-90transform: scaleY(0.9)
scale-z-90transform: scaleZ(0.9)
scale-x-95transform: scaleX(0.95)
scale-y-95transform: scaleY(0.95)
scale-z-95transform: scaleZ(0.95)
scale-x-100transform: scaleX(1)
scale-y-100transform: scaleY(1)
scale-z-100transform: scaleZ(1)
scale-x-105transform: scaleX(1.05)
scale-y-105transform: scaleY(1.05)
scale-z-105transform: scaleZ(1.05)
scale-x-110transform: scaleX(1.1)
scale-y-110transform: scaleY(1.1)
scale-z-110transform: scaleZ(1.1)
scale-x-125transform: scaleX(1.25)
scale-y-125transform: scaleY(1.25)
scale-z-125transform: scaleZ(1.25)
scale-x-150transform: scaleX(1.5)
scale-y-150transform: scaleY(1.5)
scale-z-150transform: scaleZ(1.5)
scale-valuetransform: scale3d(value, value, value);

Basic Usage

You can apply scaling on all axes. For instance to apply 0.5 scaling on x and 2 scaling on y, you can use following classes,

<div class="scale-x-50 scale-y-200"><!--Some Content--></div>
Remember to add transform class

Plugin requires you to add transform class along with other transform classes to apply the effect.
For example, instead of scale-x-110, use transform scale-x-110.
Read more on this here.

No Transform
scale-x-[0.8]
scale-y-110
scale-x-110
scale-y-[0.8]
scale-z-110
Applying different scale classes

<div className="perspective-1000">
<div className="flex space-x-10">
<div className="w-52 h-52">No Transform</div>
<div className="w-52 h-52 scale-x-[0.8] scale-y-110 transform">
<div>scale-x-[0.8]</div>
<div>scale-y-110</div>
</div>
<div className="w-52 h-52 scale-x-110 scale-y-[0.8] scale-z-110 transform">
<div>scale-x-110</div>
<div>scale-y-[0.8]</div>
<div>scale-z-110</div>
</div>
</div>
</div>

Customizing Your Theme

We extend the default theme by adding additional values for scale key. You can add any custom values from tailwind.config.js file.

module.exports = {
theme: {
extend: {
scale: {
'20': '0.2',
}
}
}
}

Arbitrary Values

If you need to use an custom value for scale, you can use the following method.

<div class="scale-x-[1.3]">
<!-- More Items -->
</div>

Learn more about arbitrary value support in the tailwindcss arbitrary values documentation.

Read More

To learn more about scale css transform refer here.

info

You can use modifiers such as md:scale-x-60 to target media queries, hover, active... etc. You can read about modifiers here.