Tailwind CSS Transforms

Tailwind CSS provides a comprehensive set of utilities for applying transform functions (like scale(), rotate(), and translate()) directly from your HTML, all without writing a single line of custom CSS.

Transforms are most powerful when combined with state variants like hover: or active: and paired with transition utilities for smooth, animated motion. Tailwind uses CSS custom properties under the hood, so all transform utilities compose correctly without conflicting with each other.

Let's look at some of the transform utilities available in Tailwind CSS.

Scale

You can use scale-{n} to resize an element uniformly. The value is a percentage, so scale-100 is the original size. You can also scale axes independently with scale-x-{n} and scale-y-{n}.

Here are some commonly used values for scale:

Utility CSS Output Visual Effect
scale-75 scale: .75; Shrinks to 75% of original size.
scale-100 scale: 1; No change (default).
scale-110 scale: 1.1; Slight zoom (great for card hover effects).
scale-125 scale: 1.25; Prominent zoom.
-scale-x-100 --tw-scale-x: -1; Flips element horizontally (mirror effect).
scale-[1.35] scale: 1.35; Arbitrary value for precise control.

Rotate

The rotate-{deg} utility rotates an element clockwise. Negative values rotate counter-clockwise. The numeric scale is open-ended, so you can use any degree value. Here are some commonly used values for rotate:

Utility CSS Output Common Use Case
rotate-0 rotate: 0deg; Resetting a rotation to its default state.
rotate-45 rotate: 45deg; Turning a plus icon into a close/X icon.
rotate-90 rotate: 90deg; Rotating a chevron to indicate an open state.
rotate-180 rotate: 180deg; Flipping an element upside-down.
-rotate-12 rotate: -12deg; Subtle tilt for decorative effect.
rotate-[17deg] rotate: 17deg; Arbitrary angle.

Translate

You can use translate-x-{n} and translate-y-{n} to move an element horizontally or vertically without affecting the layout of surrounding elements. This is useful for hover "lift" effects, tooltip positioning, and slide-in animations.

Sample values:

Utility CSS Output Visual Effect
translate-x-4 translate: 1rem; Move 1rem to the right.
-translate-y-2 translate: 0 -0.5rem; Move up by 0.5rem — classic "lift" hover.
translate-x-1/2 translate: 50%; Move by 50% of the element's width.
translate-y-full translate: 0 100%; Slide element completely below its container.
translate-[10px_-5px] Arbitrary X and Y Precise custom offset using arbitrary values.

Skew

Use skew-x-{deg} and skew-y-{deg} to slant an element along its axes. Skew is typically used for decorative layouts or diagonal section dividers, rather than interactive states.

Sample values:

Utility CSS Output Common Use Case
skew-x-6 skew(6deg); Sport-style italicised banners.
skew-y-3 skewY(3deg); Angled section backgrounds.
-skew-x-12 skew(-12deg); Reverse-angled decorative element.
skew-x-[15deg] Arbitrary skew angle. Precise control over the slant.

Transform Origin

By default, transforms are applied from the center of an element. You can use origin-{position} to change this pivot point, which affects how rotations and scales look.

Available origin positions include:

Arbitrary values like origin-[33%_75%] are also supported, as are custom properties like origin-[var(--my-origin)].

Composing Transforms

In Tailwind, transform utilities are individually applied to CSS custom properties, which means you can stack multiple transforms on one element without them overriding each other. So for example, we can use the following to scale, rotate, and lift all at once:

Examples

Here are some examples of common transform utilities in action. Hover over each card to see the transforms:

View Output

In the next page, we'll cover things like cursors, user selection, scroll behaviour, and form controls with Tailwind's interactivity utilities.