Transform & Scale in Tailwind CSS

1. Enabling Transform

Before applying transform utilities, you must include the base class transform to enable the feature:

<div class="transform scale-110">Zoomed</div>
            

2. Scaling Elements

Use scale-0 to scale-150 to increase or decrease the size:

• scale-75 – 75% size
• scale-100 – normal size
• scale-125 – 125% size
• hover:scale-110 – for interactive zoom effects

3. Rotate and Skew

Tailwind supports rotation and skewing using:

<div class="transform rotate-12">Rotated</div>
<div class="transform -skew-x-6">Skewed Left</div>
            

4. Translate Utilities

Move elements along X or Y axes using translate-x-* and translate-y-*:

<div class="transform translate-x-4">Moved Right</div>
<div class="transform -translate-y-2">Moved Up</div>
            

5. Transform Origin & Combined Transforms

Set the origin of transformation using origin-* classes:

• origin-top-left, origin-center, origin-bottom-right

You can combine multiple transform utilities for powerful effects:

<div class="transform scale-110 rotate-3 -translate-y-1 origin-top-right">Fancy Box</div>
            

6. Performance Tip

Prefer transform over changing layout properties (like width or margin) in animations. Transforms are GPU-accelerated and smoother on most devices.

Conclusion

Tailwind’s transform utilities give you expressive control over element scaling, rotation, and positioning — perfect for UI motion and transitions without custom CSS.