要素感のスペース

Tailwind CSS version
v1.3.0+

子要素間のスペースを制御するためのユーティリティ。

Class reference

Class
Properties
.space-y-0 > * + *margin-top: 0;
.space-x-0 > * + *margin-left: 0;
.space-y-1 > * + *margin-top: 0.25rem;
.space-x-1 > * + *margin-left: 0.25rem;
.space-y-2 > * + *margin-top: 0.5rem;
.space-x-2 > * + *margin-left: 0.5rem;
.space-y-3 > * + *margin-top: 0.75rem;
.space-x-3 > * + *margin-left: 0.75rem;
.space-y-4 > * + *margin-top: 1rem;
.space-x-4 > * + *margin-left: 1rem;
.space-y-5 > * + *margin-top: 1.25rem;
.space-x-5 > * + *margin-left: 1.25rem;
.space-y-6 > * + *margin-top: 1.5rem;
.space-x-6 > * + *margin-left: 1.5rem;
.space-y-8 > * + *margin-top: 2rem;
.space-x-8 > * + *margin-left: 2rem;
.space-y-10 > * + *margin-top: 2.5rem;
.space-x-10 > * + *margin-left: 2.5rem;
.space-y-12 > * + *margin-top: 3rem;
.space-x-12 > * + *margin-left: 3rem;
.space-y-16 > * + *margin-top: 4rem;
.space-x-16 > * + *margin-left: 4rem;
.space-y-20 > * + *margin-top: 5rem;
.space-x-20 > * + *margin-left: 5rem;
.space-y-24 > * + *margin-top: 6rem;
.space-x-24 > * + *margin-left: 6rem;
.space-y-32 > * + *margin-top: 8rem;
.space-x-32 > * + *margin-left: 8rem;
.space-y-40 > * + *margin-top: 10rem;
.space-x-40 > * + *margin-left: 10rem;
.space-y-48 > * + *margin-top: 12rem;
.space-x-48 > * + *margin-left: 12rem;
.space-y-56 > * + *margin-top: 14rem;
.space-x-56 > * + *margin-left: 14rem;
.space-y-64 > * + *margin-top: 16rem;
.space-x-64 > * + *margin-left: 16rem;
.space-y-px > * + *margin-top: 1px;
.space-x-px > * + *margin-left: 1px;
.-space-y-1 > * + *margin-top: -0.25rem;
.-space-x-1 > * + *margin-left: -0.25rem;
.-space-y-2 > * + *margin-top: -0.5rem;
.-space-x-2 > * + *margin-left: -0.5rem;
.-space-y-3 > * + *margin-top: -0.75rem;
.-space-x-3 > * + *margin-left: -0.75rem;
.-space-y-4 > * + *margin-top: -1rem;
.-space-x-4 > * + *margin-left: -1rem;
.-space-y-5 > * + *margin-top: -1.25rem;
.-space-x-5 > * + *margin-left: -1.25rem;
.-space-y-6 > * + *margin-top: -1.5rem;
.-space-x-6 > * + *margin-left: -1.5rem;
.-space-y-8 > * + *margin-top: -2rem;
.-space-x-8 > * + *margin-left: -2rem;
.-space-y-10 > * + *margin-top: -2.5rem;
.-space-x-10 > * + *margin-left: -2.5rem;
.-space-y-12 > * + *margin-top: -3rem;
.-space-x-12 > * + *margin-left: -3rem;
.-space-y-16 > * + *margin-top: -4rem;
.-space-x-16 > * + *margin-left: -4rem;
.-space-y-20 > * + *margin-top: -5rem;
.-space-x-20 > * + *margin-left: -5rem;
.-space-y-24 > * + *margin-top: -6rem;
.-space-x-24 > * + *margin-left: -6rem;
.-space-y-32 > * + *margin-top: -8rem;
.-space-x-32 > * + *margin-left: -8rem;
.-space-y-40 > * + *margin-top: -10rem;
.-space-x-40 > * + *margin-left: -10rem;
.-space-y-48 > * + *margin-top: -12rem;
.-space-x-48 > * + *margin-left: -12rem;
.-space-y-56 > * + *margin-top: -14rem;
.-space-x-56 > * + *margin-left: -14rem;
.-space-y-64 > * + *margin-top: -16rem;
.-space-x-64 > * + *margin-left: -16rem;
.-space-y-px > * + *margin-top: -1px;
.-space-x-px > * + *margin-left: -1px;
.space-y-reverse > * + *--space-y-reverse: 1;
.space-x-reverse > * + *--space-x-reverse: 1;

Add horizontal space between children

space-x-{amount}ユーティリティを使用して、要素間の水平方向のスペースを制御します。

1
2
3
<div class="flex space-x-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Add vertical space between children

space-y-{amount}ユーティリティを使用して、要素間の垂直方向のスペースを制御します。

1
2
3
<div class="space-y-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Reversing children order

要素の順序が逆の場合(たとえば、flex-row-reverseまたはflex-col-reverseを使用)、space-x-reverseまたはspace-y-reverseユーティリティを使用してスペースが各要素の正しい側に追加されます。

1
2
3
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

特定のブレークポイントで要素間のスペースを制御するには、既存のスペースユーティリティに{screen}:プレフィックスを追加します。たとえば、md:space-x-8クラスを要素に追加すると、中程度の画面サイズ以上でspace-x-8ユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<div class="flex space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 xl:space-x-12">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3

Customizing

Spacing scale

スペース、パディング、マージン、幅、高さの値を一度にカスタマイズする場合は、tailwind.config.jsファイルのtheme.spacingセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

スペース間の値のみをカスタマイズするには、tailwind.config.jsファイルのtheme.spaceセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      space: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはspace utilitiesのために作られます。

あなたはどのバリアントがspace utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのspaceプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     space: ['responsive'],
+     space: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしspace utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのspace propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     space: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!