Scale

Utilities for scaling an element on all three axis.

Class	Properties
scale-x-0	transform: scaleX(0)
scale-y-0	transform: scaleY(0)
scale-z-0	transform: scaleZ(0)
scale-x-50	transform: scaleX(0.5)
scale-y-50	transform: scaleY(0.5)
scale-z-50	transform: scaleZ(0.5)
scale-x-75	transform: scaleX(0.75)
scale-y-75	transform: scaleY(0.75)
scale-z-75	transform: scaleZ(0.75)
scale-x-90	transform: scaleX(0.9)
scale-y-90	transform: scaleY(0.9)
scale-z-90	transform: scaleZ(0.9)
scale-x-95	transform: scaleX(0.95)
scale-y-95	transform: scaleY(0.95)
scale-z-95	transform: scaleZ(0.95)
scale-x-100	transform: scaleX(1)
scale-y-100	transform: scaleY(1)
scale-z-100	transform: scaleZ(1)
scale-x-105	transform: scaleX(1.05)
scale-y-105	transform: scaleY(1.05)
scale-z-105	transform: scaleZ(1.05)
scale-x-110	transform: scaleX(1.1)
scale-y-110	transform: scaleY(1.1)
scale-z-110	transform: scaleZ(1.1)
scale-x-125	transform: scaleX(1.25)
scale-y-125	transform: scaleY(1.25)
scale-z-125	transform: scaleZ(1.25)
scale-x-150	transform: scaleX(1.5)
scale-y-150	transform: scaleY(1.5)
scale-z-150	transform: scaleZ(1.5)
scale-value	transform: 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.