Translate

Translate an element along an axis with spacing, full, fractions, or negative values.

Move an element along the horizontal or vertical axis without changing the space it occupies in layout. The two axes compose on the same element.

Quick reference

Example class	Expected declarations
`translate-x-8`	`--zw-translate-x: 2rem; translate: var(--zw-translate-x) var(--zw-translate-y);`
`translate-y-4`	`--zw-translate-y: 1rem; translate: var(--zw-translate-x) var(--zw-translate-y);`

Example setup

Every preview explicitly uses spec: 1, reset: "none", strict mode, spacingUnit: "0.25rem", no breakpoints, and defaultTransitionTimingFunction: "ease". This makes translate-x-8 equal 2rem and translate-y-4 equal 1rem. One preview adds the named spacing token rail: 2rem. The diagrams use authored CSS only for the stage, anchor, and square; zudo-wind utilities supply the movement and rotation.

Examples in use

Compose x and y movement

translate-x-8 and translate-y-4 move the same square 2rem right and 1rem down. rotate-12 shows that translation and rotation compose without a transform utility.

Compose x and y movement

HTML

<figure class="wind-demo-figure"><div class="wind-demo-stage" aria-hidden="true"><span class="wind-demo-origin">start</span><span class="wind-demo-piece translate-x-8 translate-y-4 rotate-12">x + y</span></div><figcaption class="wind-demo-caption">The blue square moves 2rem right and 1rem down, then rotates 12 degrees.</figcaption></figure>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-figure {
  margin: 0;
  color: #24364b;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-stage {
  position: relative;
  width: min(20rem, 100%);
  height: 10rem;
  border: 1px solid #a7bacd;
  background: linear-gradient(90deg, #f7f9fc 1px, #0000 1px), linear-gradient(#f7f9fc 1px, #0000 1px);
  background-size: 1rem 1rem;
}

.wind-demo-origin, .wind-demo-piece {
  position: absolute;
  left: 5rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.wind-demo-origin {
  border: 1px dashed #54708b;
  background: #e5edf5;
  color: #38516b;
  font-size: .7rem;
}

.wind-demo-piece {
  border: 1px solid #22598e;
  background: #a8d0f4;
  color: #153c60;
  font-weight: 650;
}

.wind-demo-caption {
  display: block;
  margin-top: .5rem;
}
.translate-x-8 {
  --zw-translate-x: 2rem;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
.translate-y-4 {
  --zw-translate-y: 1rem;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
.rotate-12 {
  rotate: 12deg;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-figure": true,
      "wind-demo-stage": true,
      "wind-demo-origin": true,
      "wind-demo-piece": true,
      "wind-demo-caption": true
    },
    "safelist": {
      "docs-preview": [
        "translate-x-8",
        "translate-y-4",
        "rotate-12"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-figure { margin: 0; color: #24364b; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-stage { position: relative; width: min(20rem, 100%); height: 10rem; border: 1px solid #a7bacd; background: linear-gradient(90deg, #f7f9fc 1px, transparent 1px), linear-gradient(#f7f9fc 1px, transparent 1px); background-size: 1rem 1rem; }
.wind-demo-origin, .wind-demo-piece { position: absolute; left: 5rem; top: 3rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.wind-demo-origin { border: 1px dashed #54708b; background: #e5edf5; color: #38516b; font-size: 0.7rem; }
.wind-demo-piece { border: 1px solid #22598e; background: #a8d0f4; color: #153c60; font-weight: 650; }
.wind-demo-caption { display: block; margin-top: 0.5rem; }

Use a named distance and a fraction

The preview config defines rail as 2rem; translate-y-1/2 moves by half of the element’s own height.

Use a named distance and a fraction

HTML

<figure class="wind-demo-figure"><div class="wind-demo-stage" aria-hidden="true"><span class="wind-demo-origin">start</span><span class="wind-demo-piece translate-x-rail translate-y-1/2">token</span></div><figcaption class="wind-demo-caption">The configured rail token moves it 2rem right; one half moves it by half of its own height.</figcaption></figure>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-rail: 2rem;
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-figure {
  margin: 0;
  color: #24364b;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-stage {
  position: relative;
  width: min(20rem, 100%);
  height: 10rem;
  border: 1px solid #a7bacd;
  background: linear-gradient(90deg, #f7f9fc 1px, #0000 1px), linear-gradient(#f7f9fc 1px, #0000 1px);
  background-size: 1rem 1rem;
}

.wind-demo-origin, .wind-demo-piece {
  position: absolute;
  left: 5rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.wind-demo-origin {
  border: 1px dashed #54708b;
  background: #e5edf5;
  color: #38516b;
  font-size: .7rem;
}

.wind-demo-piece {
  border: 1px solid #22598e;
  background: #a8d0f4;
  color: #153c60;
  font-weight: 650;
}

.wind-demo-caption {
  display: block;
  margin-top: .5rem;
}
.translate-x-rail {
  --zw-translate-x: var(--zw-spacing-rail);
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
.translate-y-1\/2 {
  --zw-translate-y: calc(100% * 1 / 2);
  translate: var(--zw-translate-x) var(--zw-translate-y);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "rail": "2rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-figure": true,
      "wind-demo-stage": true,
      "wind-demo-origin": true,
      "wind-demo-piece": true,
      "wind-demo-caption": true
    },
    "safelist": {
      "docs-preview": [
        "translate-x-rail",
        "translate-y-1/2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-figure { margin: 0; color: #24364b; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-stage { position: relative; width: min(20rem, 100%); height: 10rem; border: 1px solid #a7bacd; background: linear-gradient(90deg, #f7f9fc 1px, transparent 1px), linear-gradient(#f7f9fc 1px, transparent 1px); background-size: 1rem 1rem; }
.wind-demo-origin, .wind-demo-piece { position: absolute; left: 5rem; top: 3rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.wind-demo-origin { border: 1px dashed #54708b; background: #e5edf5; color: #38516b; font-size: 0.7rem; }
.wind-demo-piece { border: 1px solid #22598e; background: #a8d0f4; color: #153c60; font-weight: 650; }
.wind-demo-caption { display: block; margin-top: 0.5rem; }

Tune one measured offset

translate-x-[11px] accepts a one-off CSS length without adding a named spacing token.

Tune one measured offset

HTML

<figure class="wind-demo-figure"><div class="wind-demo-stage" aria-hidden="true"><span class="wind-demo-origin">start</span><span class="wind-demo-piece translate-x-[11px]">11px</span></div><figcaption class="wind-demo-caption">An arbitrary length is useful for a single measured adjustment.</figcaption></figure>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-figure {
  margin: 0;
  color: #24364b;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-stage {
  position: relative;
  width: min(20rem, 100%);
  height: 10rem;
  border: 1px solid #a7bacd;
  background: linear-gradient(90deg, #f7f9fc 1px, #0000 1px), linear-gradient(#f7f9fc 1px, #0000 1px);
  background-size: 1rem 1rem;
}

.wind-demo-origin, .wind-demo-piece {
  position: absolute;
  left: 5rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.wind-demo-origin {
  border: 1px dashed #54708b;
  background: #e5edf5;
  color: #38516b;
  font-size: .7rem;
}

.wind-demo-piece {
  border: 1px solid #22598e;
  background: #a8d0f4;
  color: #153c60;
  font-weight: 650;
}

.wind-demo-caption {
  display: block;
  margin-top: .5rem;
}
.translate-x-\[11px\] {
  --zw-translate-x: 11px;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-figure": true,
      "wind-demo-stage": true,
      "wind-demo-origin": true,
      "wind-demo-piece": true,
      "wind-demo-caption": true
    },
    "safelist": {
      "docs-preview": [
        "translate-x-[11px]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-figure { margin: 0; color: #24364b; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-stage { position: relative; width: min(20rem, 100%); height: 10rem; border: 1px solid #a7bacd; background: linear-gradient(90deg, #f7f9fc 1px, transparent 1px), linear-gradient(#f7f9fc 1px, transparent 1px); background-size: 1rem 1rem; }
.wind-demo-origin, .wind-demo-piece { position: absolute; left: 5rem; top: 3rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.wind-demo-origin { border: 1px dashed #54708b; background: #e5edf5; color: #38516b; font-size: 0.7rem; }
.wind-demo-piece { border: 1px solid #22598e; background: #a8d0f4; color: #153c60; font-weight: 650; }
.wind-demo-caption { display: block; margin-top: 0.5rem; }

Custom and named values

Numeric suffixes use tokens.spacingUnit when configured. A named value such as translate-x-rail comes from tokens.spacing; fractions such as translate-y-1/2 are percentages of the element, and square-bracket values can provide a one-off CSS length. The fixed values 0 and full mean 0 and 100%. Negative forms are supported. No Tailwind spacing scale is inherited.

Related guides: Utility grammar · Variants

Catalog details

translate-x

Field	Value
Catalog identifier	`v1.translate.x`
Class pattern	`translate-x-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"translate","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`translate` (`38`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`--zw-translate-x`, `translate`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`

Declaration templates

Property	Value kind	Fixed value
`--zw-translate-x`	`resolved`	`null`
`translate`	`fixed`	`"var(--zw-translate-x) var(--zw-translate-y)"`

Catalog examples

Example class	Expected declarations
`translate-x-0`	`--zw-translate-x: 0`; `translate: var(--zw-translate-x) var(--zw-translate-y)`
`translate-x-px`	`--zw-translate-x: 1px`; `translate: var(--zw-translate-x) var(--zw-translate-y)`

{"registrations":[{"name":"--zw-translate-x","syntax":"<length-percentage>","inherits":false,"initialValue":"0px"},{"name":"--zw-translate-y","syntax":"<length-percentage>","inherits":false,"initialValue":"0px"}]}

translate-y

Field	Value
Catalog identifier	`v1.translate.y`
Class pattern	`translate-y-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"translate","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`translate` (`38`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`--zw-translate-y`, `translate`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`

Declaration templates

Property	Value kind	Fixed value
`--zw-translate-y`	`resolved`	`null`
`translate`	`fixed`	`"var(--zw-translate-x) var(--zw-translate-y)"`

Catalog examples

Example class	Expected declarations
`translate-y-0`	`--zw-translate-y: 0`; `translate: var(--zw-translate-x) var(--zw-translate-y)`
`translate-y-px`	`--zw-translate-y: 1px`; `translate: var(--zw-translate-x) var(--zw-translate-y)`

Translate

Quick reference

Examples in use

Compose x and y movement

Use a named distance and a fraction

Tune one measured offset

Custom and named values

translate-x

Accepted values

Declaration templates

Catalog examples

translate-y

Accepted values

Declaration templates

Catalog examples

Revision History