要素間のスペース

​基本的な使い方

​子要素間に水平方向のスペースを追加

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

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​子要素間に垂直方向のスペースを追加

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

<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​子要素の順序を反転

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

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​負の値の使用

負のスペース値を使用するには、クラス名の前にダッシュを付けて負の値に変換します。

<div class="flex -space-x-4 ...">
  <!-- ... -->
</div>

​制限事項

これらのユーティリティは、グループ内の最初のアイテムを除くすべてのアイテムにマージンを追加するためのショートカットに過ぎず、グリッド、折り返しレイアウト、子要素が自然なDOM順序ではなく複雑なカスタム順序でレンダリングされる状況など、複雑なケースを処理するように設計されていません。

そのような状況では、可能な限りgapユーティリティを使用するか、親要素に一致する負のマージンを持つすべての要素にマージンを追加することをお勧めします。

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

​divideユーティリティとの併用不可

space-*ユーティリティは、divideユーティリティと連携して動作するように設計されていません。そのような状況では、代わりに子要素にマージン/パディングユーティリティを追加することを検討してください。

​条件付き適用

​ホバー、フォーカス、その他の状態

Tailwindを使用すると、バリアント修飾子を使用して、さまざまな状態でのユーティリティクラスを条件付きで適用できます。例えば、使用します hover:space-x-8 で、space-x-8ユーティリティを適用します。hover.

<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

使用可能なすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、その他の状態ドキュメントを参照してください。

​ブレークポイントとメディアクエリ

レスポンシブなブレークポイント、ダークモード、prefers-reduced-motionなど、メディアクエリをターゲットとするバリアント修飾子も使用できます。たとえば、md:space-x-8を使用すると、中程度の画面サイズ以上でspace-x-8ユーティリティが適用されます。

<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

詳細については、 レスポンシブデザイン, ダークモードと その他のメディアクエリ修飾子に関するドキュメントを参照してください。.

​カスタム値の使用

​テーマのカスタマイズ

デフォルトでは、Tailwindのスペーススケールはデフォルトのスペーススケールを使用します。tailwind.config.jsファイルのtheme.spacingまたはtheme.extend.spacingを編集して、スペーススケールをカスタマイズできます。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

あるいは、tailwind.config.jsファイルのtheme.spaceまたはtheme.extend.spaceを編集して、スペーススケールだけをカスタマイズすることもできます。

module.exports = {
  theme: {
    extend: {
      space: {
        '5px': '5px',
      }
    }
  }
}

デフォルトテーマのカスタマイズの詳細については、テーマのカスタマイズドキュメントを参照してください。

​任意の値

テーマに含めるのが適切ではない、一度限りのspace-{x|y}値を使用する必要がある場合は、角括弧を使用して、任意の値を使用してプロパティを動的に生成します。

<div class="space-y-[5px]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 ドキュメントを参照してください。