Utilities
Transforms
Scale, rotate, translate and transform origin.
143classes
556variant classes
6properties
Live example
<div class="flex flex-wrap items-center gap-6">
<div class="size-16 rounded-xl bg-primary rotate-6"></div>
<div class="size-16 rounded-xl bg-accent -rotate-12"></div>
<div class="size-16 rounded-xl bg-surface-3 scale-75"></div>
<div class="size-16 rounded-xl bg-primary translate-y-2 transition-transform hover:scale-110"></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example hover:scale-0. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | hover:active: | 113 |
| Group and peer | group-hover:peer-checked: | 113 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | rtl:ltr: | 52 |
Scale 30
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
scale-0 | scale: 0; | hover active group-hover peer-checked |
scale-x-0 | scale: 0 1; | |
scale-y-0 | scale: 1 0; | |
scale-50 | scale: 0.5; | hover active group-hover peer-checked |
scale-x-50 | scale: 0.5 1; | |
scale-y-50 | scale: 1 0.5; | |
scale-75 | scale: 0.75; | hover active group-hover peer-checked |
scale-x-75 | scale: 0.75 1; | |
scale-y-75 | scale: 1 0.75; | |
scale-90 | scale: 0.9; | hover active group-hover peer-checked |
scale-x-90 | scale: 0.9 1; | |
scale-y-90 | scale: 1 0.9; | |
scale-95 | scale: 0.95; | hover active group-hover peer-checked |
scale-x-95 | scale: 0.95 1; | |
scale-y-95 | scale: 1 0.95; | |
scale-100 | scale: 1; | hover active group-hover peer-checked |
scale-x-100 | scale: 1 1; | |
scale-y-100 | scale: 1 1; | |
scale-105 | scale: 1.05; | hover active group-hover peer-checked |
scale-x-105 | scale: 1.05 1; | |
scale-y-105 | scale: 1 1.05; | |
scale-110 | scale: 1.1; | hover active group-hover peer-checked |
scale-x-110 | scale: 1.1 1; | |
scale-y-110 | scale: 1 1.1; | |
scale-125 | scale: 1.25; | hover active group-hover peer-checked |
scale-x-125 | scale: 1.25 1; | |
scale-y-125 | scale: 1 1.25; | |
scale-150 | scale: 1.5; | hover active group-hover peer-checked |
scale-x-150 | scale: 1.5 1; | |
scale-y-150 | scale: 1 1.5; |
Rotate 17
Variants: hover:active:group-hover:peer-checked:
| Class | CSS |
|---|---|
rotate-0 | rotate: 0deg; |
rotate-1 | rotate: 1deg; |
-rotate-1 | rotate: -1deg; |
rotate-2 | rotate: 2deg; |
-rotate-2 | rotate: -2deg; |
rotate-3 | rotate: 3deg; |
-rotate-3 | rotate: -3deg; |
rotate-6 | rotate: 6deg; |
-rotate-6 | rotate: -6deg; |
rotate-12 | rotate: 12deg; |
-rotate-12 | rotate: -12deg; |
rotate-45 | rotate: 45deg; |
-rotate-45 | rotate: -45deg; |
rotate-90 | rotate: 90deg; |
-rotate-90 | rotate: -90deg; |
rotate-180 | rotate: 180deg; |
-rotate-180 | rotate: -180deg; |
Translate X 43
Variants: hover:active:group-hover:peer-checked:rtl:ltr:
| Class | CSS |
|---|---|
translate-x-0 | --m-tx: 0; translate: var(--m-tx) var(--m-ty); |
translate-x-1 | --m-tx: 0.25rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-1 | --m-tx: -0.25rem; translate: var(--m-tx) var(--m-ty); |
translate-x-2 | --m-tx: 0.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-2 | --m-tx: -0.5rem; translate: var(--m-tx) var(--m-ty); |
translate-x-3 | --m-tx: 0.75rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-3 | --m-tx: -0.75rem; translate: var(--m-tx) var(--m-ty); |
translate-x-4 | --m-tx: 1rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-4 | --m-tx: -1rem; translate: var(--m-tx) var(--m-ty); |
translate-x-5 | --m-tx: 1.25rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-5 | --m-tx: -1.25rem; translate: var(--m-tx) var(--m-ty); |
translate-x-6 | --m-tx: 1.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-6 | --m-tx: -1.5rem; translate: var(--m-tx) var(--m-ty); |
translate-x-8 | --m-tx: 2rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-8 | --m-tx: -2rem; translate: var(--m-tx) var(--m-ty); |
translate-x-10 | --m-tx: 2.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-10 | --m-tx: -2.5rem; translate: var(--m-tx) var(--m-ty); |
translate-x-12 | --m-tx: 3rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-12 | --m-tx: -3rem; translate: var(--m-tx) var(--m-ty); |
translate-x-16 | --m-tx: 4rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-16 | --m-tx: -4rem; translate: var(--m-tx) var(--m-ty); |
translate-x-20 | --m-tx: 5rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-20 | --m-tx: -5rem; translate: var(--m-tx) var(--m-ty); |
translate-x-24 | --m-tx: 6rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-24 | --m-tx: -6rem; translate: var(--m-tx) var(--m-ty); |
translate-x-px | --m-tx: 1px; translate: var(--m-tx) var(--m-ty); |
-translate-x-px | --m-tx: -1px; translate: var(--m-tx) var(--m-ty); |
translate-x-0.5 | --m-tx: 0.125rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-0.5 | --m-tx: -0.125rem; translate: var(--m-tx) var(--m-ty); |
translate-x-1.5 | --m-tx: 0.375rem; translate: var(--m-tx) var(--m-ty); |
-translate-x-1.5 | --m-tx: -0.375rem; translate: var(--m-tx) var(--m-ty); |
translate-x-full | --m-tx: 100%; translate: var(--m-tx) var(--m-ty); |
-translate-x-full | --m-tx: -100%; translate: var(--m-tx) var(--m-ty); |
translate-x-1/2 | --m-tx: 50%; translate: var(--m-tx) var(--m-ty); |
-translate-x-1/2 | --m-tx: -50%; translate: var(--m-tx) var(--m-ty); |
translate-x-1/3 | --m-tx: 33.333333%; translate: var(--m-tx) var(--m-ty); |
-translate-x-1/3 | --m-tx: -33.333333%; translate: var(--m-tx) var(--m-ty); |
translate-x-2/3 | --m-tx: 66.666667%; translate: var(--m-tx) var(--m-ty); |
-translate-x-2/3 | --m-tx: -66.666667%; translate: var(--m-tx) var(--m-ty); |
translate-x-1/4 | --m-tx: 25%; translate: var(--m-tx) var(--m-ty); |
-translate-x-1/4 | --m-tx: -25%; translate: var(--m-tx) var(--m-ty); |
translate-x-3/4 | --m-tx: 75%; translate: var(--m-tx) var(--m-ty); |
-translate-x-3/4 | --m-tx: -75%; translate: var(--m-tx) var(--m-ty); |
Translate Y 43
Variants: hover:active:group-hover:peer-checked:
| Class | CSS |
|---|---|
translate-y-0 | --m-ty: 0; translate: var(--m-tx) var(--m-ty); |
translate-y-1 | --m-ty: 0.25rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-1 | --m-ty: -0.25rem; translate: var(--m-tx) var(--m-ty); |
translate-y-2 | --m-ty: 0.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-2 | --m-ty: -0.5rem; translate: var(--m-tx) var(--m-ty); |
translate-y-3 | --m-ty: 0.75rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-3 | --m-ty: -0.75rem; translate: var(--m-tx) var(--m-ty); |
translate-y-4 | --m-ty: 1rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-4 | --m-ty: -1rem; translate: var(--m-tx) var(--m-ty); |
translate-y-5 | --m-ty: 1.25rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-5 | --m-ty: -1.25rem; translate: var(--m-tx) var(--m-ty); |
translate-y-6 | --m-ty: 1.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-6 | --m-ty: -1.5rem; translate: var(--m-tx) var(--m-ty); |
translate-y-8 | --m-ty: 2rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-8 | --m-ty: -2rem; translate: var(--m-tx) var(--m-ty); |
translate-y-10 | --m-ty: 2.5rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-10 | --m-ty: -2.5rem; translate: var(--m-tx) var(--m-ty); |
translate-y-12 | --m-ty: 3rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-12 | --m-ty: -3rem; translate: var(--m-tx) var(--m-ty); |
translate-y-16 | --m-ty: 4rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-16 | --m-ty: -4rem; translate: var(--m-tx) var(--m-ty); |
translate-y-20 | --m-ty: 5rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-20 | --m-ty: -5rem; translate: var(--m-tx) var(--m-ty); |
translate-y-24 | --m-ty: 6rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-24 | --m-ty: -6rem; translate: var(--m-tx) var(--m-ty); |
translate-y-px | --m-ty: 1px; translate: var(--m-tx) var(--m-ty); |
-translate-y-px | --m-ty: -1px; translate: var(--m-tx) var(--m-ty); |
translate-y-0.5 | --m-ty: 0.125rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-0.5 | --m-ty: -0.125rem; translate: var(--m-tx) var(--m-ty); |
translate-y-1.5 | --m-ty: 0.375rem; translate: var(--m-tx) var(--m-ty); |
-translate-y-1.5 | --m-ty: -0.375rem; translate: var(--m-tx) var(--m-ty); |
translate-y-full | --m-ty: 100%; translate: var(--m-tx) var(--m-ty); |
-translate-y-full | --m-ty: -100%; translate: var(--m-tx) var(--m-ty); |
translate-y-1/2 | --m-ty: 50%; translate: var(--m-tx) var(--m-ty); |
-translate-y-1/2 | --m-ty: -50%; translate: var(--m-tx) var(--m-ty); |
translate-y-1/3 | --m-ty: 33.333333%; translate: var(--m-tx) var(--m-ty); |
-translate-y-1/3 | --m-ty: -33.333333%; translate: var(--m-tx) var(--m-ty); |
translate-y-2/3 | --m-ty: 66.666667%; translate: var(--m-tx) var(--m-ty); |
-translate-y-2/3 | --m-ty: -66.666667%; translate: var(--m-tx) var(--m-ty); |
translate-y-1/4 | --m-ty: 25%; translate: var(--m-tx) var(--m-ty); |
-translate-y-1/4 | --m-ty: -25%; translate: var(--m-tx) var(--m-ty); |
translate-y-3/4 | --m-ty: 75%; translate: var(--m-tx) var(--m-ty); |
-translate-y-3/4 | --m-ty: -75%; translate: var(--m-tx) var(--m-ty); |
Transform 1
Variants: none
| Class | CSS |
|---|---|
transform-none | transform: none; translate: none; scale: none; rotate: none; |
Transform origin 9
Variants: rtl:ltr:
| Class | CSS |
|---|---|
origin-center | transform-origin: center; |
origin-top | transform-origin: top; |
origin-top-right | transform-origin: top right; |
origin-right | transform-origin: right; |
origin-bottom-right | transform-origin: bottom right; |
origin-bottom | transform-origin: bottom; |
origin-bottom-left | transform-origin: bottom left; |
origin-left | transform-origin: left; |
origin-top-left | transform-origin: top left; |