zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

移動

余白、full、分数、負の値を使い、軸に沿って要素を移動します。

レイアウト上の占有領域を変えずに、要素を水平方向または垂直方向へ移動します。同じ要素上で二つの軸を合成できます。

クラスと CSS の早見表

クラスの例期待される宣言
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);
例の設定

すべてのプレビューで spec: 1、reset: "none"、strict モード、spacingUnit: "0.25rem"、空のブレークポイント、defaultTransitionTimingFunction: "ease" を明示します。これにより translate-x-8 は 2rem、translate-y-4 は 1rem になります。一つの例では名前付き間隔 rail に 2rem を設定します。図のステージ、基準位置、四角形だけを自作 CSS で描き、移動と回転は zudo-wind のユーティリティで指定します。

使い方の例

x と y の移動を合成する

translate-x-8 と translate-y-4 で同じ四角形を右へ 2rem、下へ 1rem 動かします。rotate-12 も組み合わせ、transform ユーティリティなしで移動と回転が合成される様子を示します。

x と y の移動を合成する
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;
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

名前付き距離と割合を使う

プレビュー設定で rail を 2rem にし、translate-y-1/2 は要素自身の高さの半分だけ移動します。

名前付き距離と割合を使う
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);
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

測定した距離を個別に調整する

translate-x-[11px] は名前付きトークンを追加せずに、一度だけ使う CSS 長さを指定します。

測定した距離を個別に調整する
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);
}
この例の設定
{
  "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]"
      ]
    }
  }
}
デモ用の自作 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; }

任意値と名前付きの値

数値の接尾辞には、設定した tokens.spacingUnit を使います。translate-x-rail のような名前付きの値は tokens.spacing から参照します。translate-y-1/2 のような分数は要素の寸法に対する割合で、角括弧内には個別の CSS 長さを指定できます。固定値 0 と full はそれぞれ 0 と 100% です。負の値も使えます。Tailwind の間隔スケールは継承しません。

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

カタログの詳細

translate-x

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
--zw-translate-xresolvednull
translatefixed"var(--zw-translate-x) var(--zw-translate-y)"

カタログの例

クラスの例期待される宣言
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

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
--zw-translate-yresolvednull
translatefixed"var(--zw-translate-x) var(--zw-translate-y)"

カタログの例

クラスの例期待される宣言
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)

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

Revision History

作成更新