zfb
GitHub リポジトリ

検索したい単語を入力

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

内側の余白

全辺、軸、個別の辺に物理的な内側の余白を設定します。

padding は内容と境界線の間に余白を作ります。全方向、物理的な軸、または個別の辺を指定できます。

クラスと CSS の早見表

クラスの例期待される宣言
p-4padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem;
px-8padding-left: 2rem; padding-right: 2rem;
py-2padding-top: 0.5rem; padding-bottom: 0.5rem;
pt-2padding-top: 0.5rem;
pr-4padding-right: 1rem;
pb-6padding-bottom: 1.5rem;
pl-8padding-left: 2rem;
例の設定

この例では spacingUnit: "0.25rem"、reset: "none"、strict モード、空のブレークポイントを明示しています。p-4 は各辺に 1rem、px-8 は左右に 2rem を出力します。Tailwind のスケールやテーマは継承しません。色付きの余白と破線の内容ガイドは wind-demo の自作 CSS で、各プレビューから確認できます。

使い方の例

全方向に余白を作る

p-4 は内容ガイドと各境界線の間に 1rem を作ります。

全方向に余白を作る
HTML
<div class="wind-demo wind-demo-cell p-4">
  <div class="wind-demo-content">p-4 · 1rem</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-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-4 {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-4"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

水平と垂直の余白を変える

px-8 は左右に 2rem、py-2 は上下に 0.5rem を追加します。

水平と垂直の余白を変える
HTML
<div class="wind-demo wind-demo-cell px-8 py-2">
  <div class="wind-demo-content">px-8 py-2 · 2rem / 0.5rem</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-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "px-8",
        "py-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

辺ごとに指定する

pt、pr、pb、pl で四つの物理的な辺を個別に制御します。

辺ごとに指定する
HTML
<div class="wind-demo wind-demo-cell pt-2 pr-4 pb-6 pl-8">
  <div class="wind-demo-content">pt-2 pr-4 pb-6 pl-8 · 0.5 / 1 / 1.5 / 2rem</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-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "pt-2",
        "pr-4",
        "pb-6",
        "pl-8"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

内側の余白に名前を付ける

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

内側の余白に名前を付ける
HTML
<div class="wind-demo wind-demo-cell p-card">
  <div class="wind-demo-content">p-card · 1.5rem</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-card: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-card {
  padding-top: var(--zw-spacing-card);
  padding-right: var(--zw-spacing-card);
  padding-bottom: var(--zw-spacing-card);
  padding-left: var(--zw-spacing-card);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "card": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-card"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

個別の長さを指定する

p-[18px] は四辺すべてに 18px を出力します。

個別の長さを指定する
HTML
<div class="wind-demo wind-demo-cell p-[18px]">
  <div class="wind-demo-content">p-[18px] · 18px</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-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-\[18px\] {
  padding-top: 18px;
  padding-right: 18px;
  padding-bottom: 18px;
  padding-left: 18px;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-[18px]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

任意値と名前付きの値

p-0 は余白をなくし、p-px はトークンなしで 1px を指定します。それ以外の数値には tokens.spacingUnit が必要です。p-card のような名前付きの値は tokens.spacing で設定します。p-[18px] などの任意値はスケール不要です。同じ値の形式を各軸と各辺で使えます。padding は論理的な始端・終端ではなく物理的な辺に作用し、負の値や auto は使えません。任意値の calc 内の空白はアンダースコアで表します。

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

カタログの詳細

p

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-topresolvednull
padding-rightresolvednull
padding-bottomresolvednull
padding-leftresolvednull

カタログの例

クラスの例期待される宣言
p-0padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0

px

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-leftresolvednull
padding-rightresolvednull

カタログの例

クラスの例期待される宣言
px-0padding-left: 0; padding-right: 0

py

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-topresolvednull
padding-bottomresolvednull

カタログの例

クラスの例期待される宣言
py-0padding-top: 0; padding-bottom: 0

pb

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-bottomresolvednull

カタログの例

クラスの例期待される宣言
pb-0padding-bottom: 0

pl

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-leftresolvednull

カタログの例

クラスの例期待される宣言
pl-0padding-left: 0

pr

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-rightresolvednull

カタログの例

クラスの例期待される宣言
pr-0padding-right: 0

pt

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

受け入れる値

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

宣言テンプレート

プロパティ値の種類固定値
padding-topresolvednull

カタログの例

クラスの例期待される宣言
pt-0padding-top: 0

Revision History

作成更新