utilities/transform

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

skew utility class syntax and CSS output

Tailwind v4 provides skew utilities that generate transform CSS. The skew-<number> class applies skewX(<number>deg) skewY(<number>deg). The -skew-<number> class applies skewX(-<number>deg) skewY(-<number>deg). The skew-(<custom-property>) syntax generates transform: skewX(var(<custom-property>)) skewY(var(<custom-property>)). The skew-[<value>] syntax generates transform: skewX(<value>) skewY(<value>).

skew-x utility class syntax and CSS output

The skew-x-<number> class applies transform: skewX(<number>deg). The -skew-x-<number> class applies transform: skewX(-<number>deg). The skew-x-(<custom-property>) syntax generates transform: skewX(var(<custom-property>)). The skew-x-[<value>] syntax generates transform: skewX(<value>).

skew-y utility class syntax and CSS output

The skew-y-<number> class applies transform: skewY(<number>deg). The -skew-y-<number> class applies transform: skewY(-<number>deg). The skew-y-(<custom-property>) syntax generates transform: skewY(var(<custom-property>)). The skew-y-[<value>] syntax generates transform: skewY(<value>).

skew utilities support negative values

Skew utilities support negative values using the minus prefix. For example, -skew-3, -skew-6, -skew-x-12, -skew-y-12 all apply negative skew transforms.

skew utilities support responsive design

Skew utilities in Tailwind v4 support responsive design breakpoints, allowing different skew values to be applied at different screen sizes.

transform utility classes available

The transform utilities available in Tailwind CSS v4 are: transform-none (removes all transforms), transform-gpu (enables hardware acceleration with translateZ), transform-cpu (forces CPU rendering), transform-[<value>] (arbitrary values), and transform-(<custom-property>) (custom properties).

transform-none removes all transforms

The transform-none utility applies transform: none; and completely removes all transforms from an element at once.

transform-gpu enables hardware acceleration

The transform-gpu utility applies transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); to force GPU rendering for better transition performance.

transform-cpu forces CPU rendering

The transform-cpu utility applies transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); and can be used to conditionally undo GPU acceleration and force CPU rendering instead.

transform arbitrary values with brackets

You can use transform-[<value>] syntax to apply arbitrary CSS transform values, for example transform-[matrix(1,2,3,4,5,6)].

transform custom property syntax

You can use transform-(<custom-property>) syntax to apply a custom CSS property as a transform value, which expands to transform: var(<custom-property>);

translate utility class format and CSS output

The translate utility in Tailwind CSS v4 supports multiple formats. The translate prefix (without axis suffix) accepts spacing scale numbers, fractions, full, px, custom properties, and arbitrary values. The CSS output for translate is 'translate: <value>;' where the value varies by class variant. For example, translate-<number> produces 'translate: calc(var(--spacing) * <number>) var(--tw-translate-x) var(--tw-translate-y);' and translate-<fraction> produces 'translate: calc(<fraction> * 100%) var(--tw-translate-x) var(--tw-translate-y);'.

translate-x utility class variants

The translate-x utility supports the following class variants: translate-x-<number> using calc(var(--spacing) * <number>), -translate-x-<number> using calc(var(--spacing) * -<number>), translate-x-<fraction> using calc(<fraction> * 100%), -translate-x-<fraction> using calc(<fraction> * -100%), translate-x-full using 100%, -translate-x-full using -100%, translate-x-px using 1px, -translate-x-px using -1px, translate-x-(<custom-property>) using var(<custom-property>), and translate-x-[<value>] using arbitrary values.

translate-y utility class variants

The translate-y utility supports the following class variants: translate-y-<number> using calc(var(--spacing) * <number>), -translate-y-<number> using calc(var(--spacing) * -<number>), translate-y-<fraction> using calc(<fraction> * 100%), -translate-y-<fraction> using calc(<fraction> * -100%), translate-y-full using 100%, -translate-y-full using -100%, translate-y-px using 1px, -translate-y-px using -1px, translate-y-(<custom-property>) using var(<custom-property>), and translate-y-[<value>] using arbitrary values.

translate-z utility class variants for 3D transforms

The translate-z utility supports the following class variants: translate-z-<number> using 'translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number>);', -translate-z-<number> using 'translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -<number>);', translate-z-px using 'translate: var(--tw-translate-x) var(--tw-translate-y) 1px;', -translate-z-px using 'translate: var(--tw-translate-x) var(--tw-translate-y) -1px;', translate-z-(<custom-property>) using 'translate: var(--tw-translate-x) var(--tw-translate-y) var(<custom-property>);', and translate-z-[<value>] using arbitrary values.

translate-none class

The translate-none utility class sets 'translate: none;' to remove any translation applied to an element.

translate-z requires transform-3d parent

The translate-z-<number> utilities require the transform-3d utility to be applied to the parent element in order to function properly.

translate utility supports responsive design

The translate utility supports responsive design through Tailwind's standard responsive breakpoint modifiers.

Give your agent this brain