Tailwind Transform, Scale, and Rotate to CSS

Tailwind Transform Utilities in CSS

Tailwind's transform system uses CSS custom properties to compose multiple transform functions. This allows you to combine scale, rotate, translate, and skew without overriding each other.

Transform Base

/* transform */
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
           rotate(var(--tw-rotate))
           skewX(var(--tw-skew-x))
           skewY(var(--tw-skew-y))
           scaleX(var(--tw-scale-x))
           scaleY(var(--tw-scale-y));

/* transform-none */
transform: none;

Scale

/* scale-50 */
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;

/* scale-75 */
--tw-scale-x: 0.75;
--tw-scale-y: 0.75;

/* scale-100 */
--tw-scale-x: 1;
--tw-scale-y: 1;

/* scale-110 */
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;

/* scale-150 */
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;

Rotate

/* rotate-45 */
--tw-rotate: 45deg;

/* rotate-90 */
--tw-rotate: 90deg;

/* rotate-180 */
--tw-rotate: 180deg;

/* -rotate-45 */
--tw-rotate: -45deg;

Transform Origin

/* origin-center */   transform-origin: center;
/* origin-top */      transform-origin: top;
/* origin-top-right */transform-origin: top right;
/* origin-right */    transform-origin: right;
/* origin-bottom */   transform-origin: bottom;
/* origin-left */     transform-origin: left;

Converting to Vanilla CSS

When converting to plain CSS, replace the CSS variables with actual values. For example, scale-110 rotate-3 becomes:

transform: scale(1.1) rotate(3deg);