Transforms
Translate
Utilities for translate an element that has transform applied.
Class
| class | css |
|---|---|
| translate-x-0 | --transform-translate-x: 0 |
| translate-x-1 | --transform-translate-x: 0.25rem |
| translate-x-2 | --transform-translate-x: 0.5rem |
| translate-x-3 | --transform-translate-x: 0.75rem |
| translate-x-4 | --transform-translate-x: 1rem |
| translate-x-5 | --transform-translate-x: 1.25rem |
| translate-x-6 | --transform-translate-x: 1.5rem |
| translate-x-8 | --transform-translate-x: 2rem |
| translate-x-10 | --transform-translate-x: 2.5rem |
| translate-x-12 | --transform-translate-x: 3rem |
| translate-x-16 | --transform-translate-x: 4rem |
| translate-x-20 | --transform-translate-x: 5rem |
| translate-x-24 | --transform-translate-x: 6rem |
| translate-x-32 | --transform-translate-x: 8rem |
| translate-x-40 | --transform-translate-x: 10rem |
| translate-x-48 | --transform-translate-x: 12rem |
| translate-x-56 | --transform-translate-x: 14rem |
| translate-x-64 | --transform-translate-x: 16rem |
| translate-x-px | --transform-translate-x: 1px |
| -translate-x-1 | --transform-translate-x: -0.25rem |
| -translate-x-2 | --transform-translate-x: -0.5rem |
| -translate-x-3 | --transform-translate-x: -0.75rem |
| -translate-x-4 | --transform-translate-x: -1rem |
| -translate-x-5 | --transform-translate-x: -1.25rem |
| -translate-x-6 | --transform-translate-x: -1.5rem |
| -translate-x-8 | --transform-translate-x: -2rem |
| -translate-x-10 | --transform-translate-x: -2.5rem |
| -translate-x-12 | --transform-translate-x: -3rem |
| -translate-x-16 | --transform-translate-x: -4rem |
| -translate-x-20 | --transform-translate-x: -5rem |
| -translate-x-24 | --transform-translate-x: -6rem |
| -translate-x-32 | --transform-translate-x: -8rem |
| -translate-x-40 | --transform-translate-x: -10rem |
| -translate-x-48 | --transform-translate-x: -12rem |
| -translate-x-56 | --transform-translate-x: -14rem |
| -translate-x-64 | --transform-translate-x: -16rem |
| -translate-x-px | --transform-translate-x: -1px |
| -translate-x-full | --transform-translate-x: -100% |
| -translate-x-1/2 | --transform-translate-x: -50% |
| translate-x-1/2 | --transform-translate-x: 50% |
| translate-x-full | --transform-translate-x: 100% |
| translate-y-0 | --transform-translate-y: 0 |
| translate-y-1 | --transform-translate-y: 0.25rem |
| translate-y-2 | --transform-translate-y: 0.5rem |
| translate-y-3 | --transform-translate-y: 0.75rem |
| translate-y-4 | --transform-translate-y: 1rem |
| translate-y-5 | --transform-translate-y: 1.25rem |
| translate-y-6 | --transform-translate-y: 1.5rem |
| translate-y-8 | --transform-translate-y: 2rem |
| translate-y-10 | --transform-translate-y: 2.5rem |
| translate-y-12 | --transform-translate-y: 3rem |
| translate-y-16 | --transform-translate-y: 4rem |
| translate-y-20 | --transform-translate-y: 5rem |
| translate-y-24 | --transform-translate-y: 6rem |
| translate-y-32 | --transform-translate-y: 8rem |
| translate-y-40 | --transform-translate-y: 10rem |
| translate-y-48 | --transform-translate-y: 12rem |
| translate-y-56 | --transform-translate-y: 14rem |
| translate-y-64 | --transform-translate-y: 16rem |
| translate-y-px | --transform-translate-y: 1px |
| -translate-y-1 | --transform-translate-y: -0.25rem |
| -translate-y-2 | --transform-translate-y: -0.5rem |
| -translate-y-3 | --transform-translate-y: -0.75rem |
| -translate-y-4 | --transform-translate-y: -1rem |
| -translate-y-5 | --transform-translate-y: -1.25rem |
| -translate-y-6 | --transform-translate-y: -1.5rem |
| -translate-y-8 | --transform-translate-y: -2rem |
| -translate-y-10 | --transform-translate-y: -2.5rem |
| -translate-y-12 | --transform-translate-y: -3rem |
| -translate-y-16 | --transform-translate-y: -4rem |
| -translate-y-20 | --transform-translate-y: -5rem |
| -translate-y-24 | --transform-translate-y: -6rem |
| -translate-y-32 | --transform-translate-y: -8rem |
| -translate-y-40 | --transform-translate-y: -10rem |
| -translate-y-48 | --transform-translate-y: -12rem |
| -translate-y-56 | --transform-translate-y: -14rem |
| -translate-y-64 | --transform-translate-y: -16rem |
| -translate-y-px | --transform-translate-y: -1px |
| -translate-y-full | --transform-translate-y: -100% |
| -translate-y-1/2 | --transform-translate-y: -50% |
| translate-y-1/2 | --transform-translate-y: 50% |
| translate-y-full | --transform-translate-y: 100% |
Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | ||
| hover | Yes | |
| group-hover | ||
| focus | ||
| focus-within | Yes | |
| active | ||
| visited | ||
| checked | ||
| disabled |
