Transforms in Tailwind CSS

Tailwind provides a comprehensive set of transformation utilities that allow you to rotate, scale, translate, and skew elements. In Tailwind v4, transformations are much more intuitive as you can apply multiple transformation utilities to the same element without needing a separate transform utility class.

Rotating Elements

Use classes like rotate-45, rotate-90, or -rotate-12 to rotate an element.

<div class="rotate-45">...</div>

Scaling Elements

Use classes like scale-50, scale-150, or scale-x-125 to scale an element. Values range from 0 to 200 in the default configuration.

<div class="scale-125">...</div>

Translating Elements

Use classes like translate-x-4 or -translate-y-12 to move an element. These use the same spacing scale as padding and margin.

<div class="translate-x-full translate-y-1/2">...</div>

Skewing Elements

Use classes like skew-x-6 or -skew-y-12 to skew an element along the X or Y axis.

<div class="skew-x-12">...</div>

Arbitrary Values

For precise control, use arbitrary values with the square bracket syntax.

<div class="rotate-[17deg] scale-[1.08]">...</div>