Child spacing

Add spacing between later visible siblings with direct child selectors.

Use space-x or space-y to add a margin to later eligible children of one parent. The parent must contain the children directly; the utility does not add padding to the parent or a gap between layout tracks.

Quick reference

Example class	Expected declarations
`space-x-4`	`margin-left: 1rem;`
`space-y-3`	`margin-top: 0.75rem;`

Example setup

These examples explicitly use spacingUnit: "0.25rem", reset: "none", strict mode and no breakpoints. space-x adds margin-left to later eligible siblings and space-y adds margin-top. No Tailwind scale or theme is inherited. wind-demo classes only draw the cards and frames; their CSS is shown with each preview.

Examples in use

Space later children in a row

space-x-4 adds 1rem of left margin to each later eligible sibling in DOM order.

Space later children in a row

HTML

<div class="wind-demo wind-demo-row flex space-x-4">
  <div class="wind-demo-cell">First</div>
  <div class="wind-demo-cell">Second</div>
  <div class="wind-demo-cell">Third</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-row {
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-cell {
  min-width: 5rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.flex {
  display: flex;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-row": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "space-x-4"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-row { border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-cell { min-width: 5rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Filter children with the hidden attribute

space-y-3 adds 0.75rem top margin to later siblings without hidden. A display:none scaffold child without that attribute still matches the selector, even though it cannot be seen.

Filter children with the hidden attribute

HTML

<div class="wind-demo wind-demo-stack space-y-3">
  <div class="wind-demo-cell">First eligible child</div>
  <div class="wind-demo-cell wind-demo-display-none">display:none, without hidden</div>
  <div hidden class="wind-demo-cell">hidden attribute</div>
  <div class="wind-demo-cell">Later eligible child</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-stack {
  width: 18rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-cell {
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-display-none {
  display: none;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-stack": true,
      "wind-demo-cell": true,
      "wind-demo-display-none": true
    },
    "safelist": {
      "docs-preview": [
        "space-y-3"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-stack { width: 18rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-cell { min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-display-none { display: none; }

Pull row items closer together

-space-x-2 applies a negative left margin to later siblings, so the cards overlap.

Pull row items closer together

HTML

<div class="wind-demo wind-demo-row flex -space-x-2">
  <div class="wind-demo-cell">First</div>
  <div class="wind-demo-cell">Second overlaps</div>
  <div class="wind-demo-cell">Third</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-row {
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-cell {
  width: 6rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-cell:last-child {
  background: #c6d8e9;
}
.flex {
  display: flex;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-left: -0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-row": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "-space-x-2",
        "flex"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-row { border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-cell { width: 6rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-cell:last-child { background: #c6d8e9; }

Use a named spacing token

The example explicitly configures tokens.spacing.stack to 1.5rem.

Use a named spacing token

HTML

<div class="wind-demo wind-demo-stack space-y-stack">
  <div class="wind-demo-cell">First</div>
  <div class="wind-demo-cell">Second</div>
  <div class="wind-demo-cell">Third</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-stack: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-stack {
  width: 18rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-cell {
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.space-y-stack > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--zw-spacing-stack);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "stack": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-stack": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "space-y-stack"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-stack { width: 18rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-cell { min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Custom and named values

space-x-0 and space-y-0 add no margin; the px suffix means 1px. Other numeric suffixes need tokens.spacingUnit, named values need tokens.spacing, and bracket values such as space-y-[18px] can use a one-off length. Negative values are supported, so -space-x-2 can pull items together or make them overlap. The child selector filters siblings with the hidden attribute. It does not inspect computed display, so display:none without hidden still matches. These utilities follow DOM sibling order and are a margin shortcut: use gap for grids, wrapping layouts, or reversed visual order, and use explicit margins when children need different spacing.

Related guides: Utility grammar · Variants

Catalog details

space-x

Field	Value
Catalog identifier	`v1.space-x`
Class pattern	`space-x-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`child-space` (`12`)
Order rank	`0`
Selector shape	`laterVisibleSiblings`
Spec version	`1`
Emitter properties	`margin-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`margin-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`space-x-0`	`margin-left: 0`

space-y

Field	Value
Catalog identifier	`v1.space-y`
Class pattern	`space-y-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`child-space` (`12`)
Order rank	`0`
Selector shape	`laterVisibleSiblings`
Spec version	`1`
Emitter properties	`margin-top`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`margin-top`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`space-y-0`	`margin-top: 0`

Child spacing

Quick reference

Examples in use

Space later children in a row

Filter children with the hidden attribute

Pull row items closer together

Use a named spacing token

Custom and named values

space-x

Accepted values

Declaration templates

Catalog examples

space-y

Accepted values

Declaration templates

Catalog examples

Revision History