子要素間の余白

直接の子セレクタを使い、後続の表示対象の兄弟要素間に余白を追加します。

space-x と space-y は、親要素の後続する対象の子要素に margin を追加します。子要素は親の直下に並ぶ必要があります。親の padding やレイアウトトラック間の gap は設定しません。

クラスと CSS の早見表

クラスの例	期待される宣言
`space-x-4`	`margin-left: 1rem;`
`space-y-3`	`margin-top: 0.75rem;`

例の設定

この例では spacingUnit: "0.25rem"、reset: "none"、strict モード、空のブレークポイントを明示しています。space-x は対象となる後続の兄弟要素に margin-left、space-y は margin-top を追加します。Tailwind のスケールやテーマは継承しません。wind-demo クラスはカードと枠の表示だけを担当し、自作 CSS は各プレビューから確認できます。

使い方の例

横並びの後続する子要素に間隔を作る

space-x-4 は DOM 順で後続する対象の兄弟要素それぞれに、左 margin 1rem を追加します。

横並びの後続する子要素に間隔を作る

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;
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

hidden 属性の子要素を除外する

space-y-3 は hidden がない後続の兄弟要素に上 margin 0.75rem を追加します。hidden 属性を持たず display:none にした自作 CSS の子要素もセレクターの対象ですが、表示はされません。

hidden 属性の子要素を除外する

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;
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

横並びの項目を近づける

-space-x-2 は後続する兄弟要素に負の左 margin を指定し、カードを重ねます。

横並びの項目を近づける

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;
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

名前付き spacing トークンを使う

tokens.spacing.stack に 1.5rem を明示的に設定しています。

名前付き spacing トークンを使う

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);
}

この例の設定

{
  "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"
      ]
    }
  }
}

デモ用の自作 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; }

任意値と名前付きの値

space-x-0 と space-y-0 は margin を追加せず、px 接尾辞は 1px を表します。それ以外の数値には tokens.spacingUnit、名前付きの値には tokens.spacing が必要です。space-y-[18px] のような角括弧の値では、一度だけ使う長さを指定できます。負の値も使え、-space-x-2 で項目を近づけたり重ねたりできます。子セレクターは hidden 属性のある兄弟要素を除外します。計算後の display は調べないため、hidden 属性がない display:none の要素は対象になります。対象は DOM の兄弟順です。このユーティリティは margin の省略形なので、grid、折り返すレイアウト、視覚上の順番を反転したレイアウトには gap を使い、子ごとに異なる間隔には個別の margin を使います。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

space-x

フィールド	値
カタログ識別子	`v1.space-x`
クラスパターン	`space-x-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`child-space` (`12`)
並び順の順位	`0`
セレクタの形	`laterVisibleSiblings`
仕様バージョン	`1`
出力するプロパティ	`margin-left`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-left`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`space-x-0`	`margin-left: 0`

space-y

フィールド	値
カタログ識別子	`v1.space-y`
クラスパターン	`space-y-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`2`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`child-space` (`12`)
並び順の順位	`0`
セレクタの形	`laterVisibleSiblings`
仕様バージョン	`1`
出力するプロパティ	`margin-top`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-top`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`space-y-0`	`margin-top: 0`

子要素間の余白

クラスと CSS の早見表

使い方の例

横並びの後続する子要素に間隔を作る

hidden 属性の子要素を除外する

横並びの項目を近づける

名前付き spacing トークンを使う

任意値と名前付きの値

space-x

受け入れる値

宣言テンプレート

カタログの例

space-y

受け入れる値

宣言テンプレート

カタログの例

Revision History