zfb
GitHub リポジトリ

検索したい単語を入力

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

サイズ

余白、サイズトークン、分数、キーワードを使い、幅と高さの制約を設定します。

width、height、size で寸法を直接設定し、min/max の制約で可変範囲を決めます。w-full と max-w-* を組み合わせると、幅が親に追従しながら読みやすい最大幅で止まる内容領域を作れます。

クラスと CSS の早見表

クラスの例期待される宣言
size-12width: 3rem; height: 3rem;
h-24height: 6rem;
w-1/2width: calc(100% * 1 / 2);
max-w-64max-width: 16rem;
min-w-0min-width: 0;
min-h-24min-height: 6rem;
max-h-32max-height: 8rem;
size-cardwidth: var(--zw-size-card); height: var(--zw-size-card);
max-w-readingmax-width: var(--zw-size-reading);
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

寸法を指定

size-12 は幅と高さを 3rem にし、h-24 は高さを 6rem、w-1/2 は親幅の半分にします。

寸法を指定
HTML
<div class="wind-demo">
  <div class="wind-demo-frame w-64 flex flex-col gap-2">
    <div class="wind-demo-tile size-12">size-12 square</div>
    <div class="wind-demo-tile h-24 w-1/2">h-24 and half width</div>
    <div class="wind-demo-tile w-full">w-full fills the frame</div>
  </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.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.h-24 {
  height: 6rem;
}
.w-1\/2 {
  width: calc(100% * 1 / 2);
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-col",
        "gap-2",
        "h-24",
        "size-12",
        "w-1/2",
        "w-64",
        "w-full"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

可変ボックスに上限と下限を設定

min-w-0 は flex 子要素が縮めるようにし、max-w-48 は幅を制限します。min-h-24 は下限、max-h-32 は高さ h-48 の上限です。

可変ボックスに上限と下限を設定
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Minimums keep a box from getting smaller; maximums cap it.</p>
  <div class="wind-demo-frame w-64 flex flex-row gap-2">
    <div class="wind-demo-tile min-w-0 max-w-48 w-full">min-w-0 allows this flex item to shrink; max-w-48 caps width</div>
    <div class="wind-demo-tile min-h-24">min-h-24 keeps this box at least 6rem tall</div>
    <div class="wind-demo-tile h-48 max-h-32 overflow-hidden">h-48 is capped by max-h-32</div>
    <div class="wind-demo-tile max-w-64">max-w-64 sets a maximum width</div>
  </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.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.h-48 {
  height: 12rem;
}
.max-h-32 {
  max-height: 8rem;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-64 {
  max-width: 16rem;
}
.min-h-24 {
  min-height: 6rem;
}
.min-w-0 {
  min-width: 0;
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.overflow-hidden {
  overflow: hidden;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-row",
        "gap-2",
        "h-48",
        "max-h-32",
        "max-w-48",
        "max-w-64",
        "min-h-24",
        "min-w-0",
        "overflow-hidden",
        "w-64",
        "w-full"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

名前付き値と任意値

size-card は tokens.sizes.card の 5rem を使い、w-[18rem] は一回限りの値、max-w-reading は別に設定したサイズトークンを使います。

名前付き値と任意値
HTML
<div class="wind-demo">
  <div class="wind-demo-frame w-full">
    <div class="wind-demo-tile size-card">Named size token: card</div>
    <div class="wind-demo-tile w-[18rem] max-w-reading">Arbitrary width with a named maximum</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-size-card: 5rem;
    --zw-size-reading: 20rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.size-card {
  width: var(--zw-size-card);
  height: var(--zw-size-card);
}
.max-w-reading {
  max-width: var(--zw-size-reading);
}
.w-\[18rem\] {
  width: 18rem;
}
.w-full {
  width: 100%;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "sizes": {
        "card": "5rem",
        "reading": "20rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "max-w-reading",
        "size-card",
        "w-[18rem]",
        "w-full"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

任意値と名前付きの値

spacingUnit は 0.25rem に設定しているため、w-16 は 4rem です。w-1/2 のような分数、full/min/max/fit/auto/screen/dvh などの組み込み値、tokens.sizes や tokens.spacing の名前付き値、w-[18rem] のような任意 CSS 値も使えます。size は幅と高さを同時に設定します。このプレビューでは tokens.sizes.card と tokens.sizes.reading を明示します。

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

カタログの詳細

size

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"auto""auto"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
widthresolvednull
heightresolvednull

カタログの例

クラスの例期待される宣言
size-fullwidth: 100%; height: 100%

h

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"auto""auto"
keyword"screen""100vh"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
heightresolvednull

カタログの例

クラスの例期待される宣言
h-fullheight: 100%

max-h

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"none""none"
keyword"screen""100vh"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
max-heightresolvednull

カタログの例

クラスの例期待される宣言
max-h-fullmax-height: 100%

max-w

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"none""none"
keyword"screen""100vw"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
max-widthresolvednull

カタログの例

クラスの例期待される宣言
max-w-fullmax-width: 100%

min-h

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"screen""100vh"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
min-heightresolvednull

カタログの例

クラスの例期待される宣言
min-h-fullmin-height: 100%

min-w

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"screen""100vw"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
min-widthresolvednull

カタログの例

クラスの例期待される宣言
min-w-fullmin-width: 100%

w

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

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"
keyword"full""100%"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"auto""auto"
keyword"screen""100vw"
keyword"dvw""100dvw"
keyword"dvh""100dvh"

宣言テンプレート

プロパティ値の種類固定値
widthresolvednull

カタログの例

クラスの例期待される宣言
w-fullwidth: 100%

Revision History

作成更新