transforms.md

Transforms

• Rotate
• Scale
• Skew
• Transform Origin
• Translate

---

Rotate

Utilities for rotating elements with transform.

Group

TailwindJS token
rotate_utilities

Utilities

TailwindJS token	TailwindCSS token
rotate_0	rotate-0
rotate_1	rotate-1
rotate_12	rotate-12
rotate_180	rotate-180
rotate_2	rotate-2
rotate_3	rotate-3
rotate_45	rotate-45
rotate_6	rotate-6
rotate_90	rotate-90

Arbitraries

TailwindJS token	TailwindCSS token
rotate_arbitrary, rotate_arb	rotate-[…]

Scale

Utilities for scaling elements with transform.

Group

TailwindJS token
scale_utilities

Utilities

TailwindJS token	TailwindCSS token
scale_0	scale-0
scale_100	scale-100
scale_105	scale-105
scale_110	scale-110
scale_125	scale-125
scale_150	scale-150
scale_50	scale-50
scale_75	scale-75
scale_90	scale-90
scale_95	scale-95
scale_x_0	scale-x-0
scale_x_100	scale-x-100
scale_x_105	scale-x-105
scale_x_110	scale-x-110
scale_x_125	scale-x-125
scale_x_150	scale-x-150
scale_x_50	scale-x-50
scale_x_75	scale-x-75
scale_x_90	scale-x-90
scale_x_95	scale-x-95
scale_y_0	scale-y-0
scale_y_100	scale-y-100
scale_y_105	scale-y-105
scale_y_110	scale-y-110
scale_y_125	scale-y-125
scale_y_150	scale-y-150
scale_y_50	scale-y-50
scale_y_75	scale-y-75
scale_y_90	scale-y-90
scale_y_95	scale-y-95

Arbitraries

TailwindJS token	TailwindCSS token
scale_arbitrary, scale_arb	scale-[…]
scale_x_arbitrary, scale_x_arb	scale-x-[…]
scale_y_arbitrary, scale_y_arb	scale-y-[…]

Skew

Utilities for skewing elements with transform.

Group

TailwindJS token
skew_utilities

Utilities

TailwindJS token	TailwindCSS token
skew_x_0	skew-x-0
skew_x_1	skew-x-1
skew_x_12	skew-x-12
skew_x_2	skew-x-2
skew_x_3	skew-x-3
skew_x_6	skew-x-6
skew_y_0	skew-y-0
skew_y_1	skew-y-1
skew_y_12	skew-y-12
skew_y_2	skew-y-2
skew_y_3	skew-y-3
skew_y_6	skew-y-6

Arbitraries

TailwindJS token	TailwindCSS token
skew_x_arbitrary, skew_x_arb	skew-x-[…]
skew_y_arbitrary, skew_y_arb	skew-y-[…]

Transform Origin

Utilities for specifying the origin for an element's transformations.

Group

TailwindJS token
transform_origin_utilities

Utilities

TailwindJS token	TailwindCSS token
origin_bottom	origin-bottom
origin_bottom_left	origin-bottom-left
origin_bottom_right	origin-bottom-right
origin_center	origin-center
origin_left	origin-left
origin_right	origin-right
origin_top	origin-top
origin_top_left	origin-top-left
origin_top_right	origin-top-right

Arbitraries

TailwindJS token	TailwindCSS token
origin_arbitrary, origin_arb	origin-[…]
origin_bottom_arbitrary, origin_bottom_arb	origin-bottom-[…]
origin_top_arbitrary, origin_top_arb	origin-top-[…]

Translate

Utilities for translating elements with transform.

Group

TailwindJS token
translate_utilities

Utilities

TailwindJS token	TailwindCSS token
translate_x_0	translate-x-0
translate_x_0_5	translate-x-0.5
translate_x_1	translate-x-1
translate_x_10	translate-x-10
translate_x_11	translate-x-11
translate_x_12	translate-x-12
translate_x_14	translate-x-14
translate_x_16	translate-x-16
translate_x_1_5	translate-x-1.5
translate_x_1_on_2	translate-x-1/2
translate_x_1_on_3	translate-x-1/3
translate_x_1_on_4	translate-x-1/4
translate_x_2	translate-x-2
translate_x_20	translate-x-20
translate_x_24	translate-x-24
translate_x_28	translate-x-28
translate_x_2_5	translate-x-2.5
translate_x_2_on_3	translate-x-2/3
translate_x_2_on_4	translate-x-2/4
translate_x_3	translate-x-3
translate_x_32	translate-x-32
translate_x_36	translate-x-36
translate_x_3_5	translate-x-3.5
translate_x_3_on_4	translate-x-3/4
translate_x_4	translate-x-4
translate_x_40	translate-x-40
translate_x_44	translate-x-44
translate_x_48	translate-x-48
translate_x_5	translate-x-5
translate_x_52	translate-x-52
translate_x_56	translate-x-56
translate_x_6	translate-x-6
translate_x_60	translate-x-60
translate_x_64	translate-x-64
translate_x_7	translate-x-7
translate_x_72	translate-x-72
translate_x_8	translate-x-8
translate_x_80	translate-x-80
translate_x_9	translate-x-9
translate_x_96	translate-x-96
translate_x_full	translate-x-full
translate_x_px	translate-x-px
translate_y_0	translate-y-0
translate_y_0_5	translate-y-0.5
translate_y_1	translate-y-1
translate_y_10	translate-y-10
translate_y_11	translate-y-11
translate_y_12	translate-y-12
translate_y_14	translate-y-14
translate_y_16	translate-y-16
translate_y_1_5	translate-y-1.5
translate_y_1_on_2	translate-y-1/2
translate_y_1_on_3	translate-y-1/3
translate_y_1_on_4	translate-y-1/4
translate_y_2	translate-y-2
translate_y_20	translate-y-20
translate_y_24	translate-y-24
translate_y_28	translate-y-28
translate_y_2_5	translate-y-2.5
translate_y_2_on_3	translate-y-2/3
translate_y_2_on_4	translate-y-2/4
translate_y_3	translate-y-3
translate_y_32	translate-y-32
translate_y_36	translate-y-36
translate_y_3_5	translate-y-3.5
translate_y_3_on_4	translate-y-3/4
translate_y_4	translate-y-4
translate_y_40	translate-y-40
translate_y_44	translate-y-44
translate_y_48	translate-y-48
translate_y_5	translate-y-5
translate_y_52	translate-y-52
translate_y_56	translate-y-56
translate_y_6	translate-y-6
translate_y_60	translate-y-60
translate_y_64	translate-y-64
translate_y_7	translate-y-7
translate_y_72	translate-y-72
translate_y_8	translate-y-8
translate_y_80	translate-y-80
translate_y_9	translate-y-9
translate_y_96	translate-y-96
translate_y_full	translate-y-full
translate_y_px	translate-y-px

Arbitraries

TailwindJS token	TailwindCSS token
translate_x_arbitrary, translate_x_arb	translate-x-[…]
translate_y_arbitrary, translate_y_arb	translate-y-[…]