マージン

要素のマージンを制御するためのユーティリティ。

Class reference

Class
Properties
.m-0margin: 0;
.m-1margin: 0.25rem;
.m-2margin: 0.5rem;
.m-3margin: 0.75rem;
.m-4margin: 1rem;
.m-5margin: 1.25rem;
.m-6margin: 1.5rem;
.m-8margin: 2rem;
.m-10margin: 2.5rem;
.m-12margin: 3rem;
.m-16margin: 4rem;
.m-20margin: 5rem;
.m-24margin: 6rem;
.m-32margin: 8rem;
.m-40margin: 10rem;
.m-48margin: 12rem;
.m-56margin: 14rem;
.m-64margin: 16rem;
.m-automargin: auto;
.m-pxmargin: 1px;
.-m-1margin: -0.25rem;
.-m-2margin: -0.5rem;
.-m-3margin: -0.75rem;
.-m-4margin: -1rem;
.-m-5margin: -1.25rem;
.-m-6margin: -1.5rem;
.-m-8margin: -2rem;
.-m-10margin: -2.5rem;
.-m-12margin: -3rem;
.-m-16margin: -4rem;
.-m-20margin: -5rem;
.-m-24margin: -6rem;
.-m-32margin: -8rem;
.-m-40margin: -10rem;
.-m-48margin: -12rem;
.-m-56margin: -14rem;
.-m-64margin: -16rem;
.-m-pxmargin: -1px;
.my-0margin-top: 0; margin-bottom: 0;
.mx-0margin-left: 0; margin-right: 0;
.my-1margin-top: 0.25rem; margin-bottom: 0.25rem;
.mx-1margin-left: 0.25rem; margin-right: 0.25rem;
.my-2margin-top: 0.5rem; margin-bottom: 0.5rem;
.mx-2margin-left: 0.5rem; margin-right: 0.5rem;
.my-3margin-top: 0.75rem; margin-bottom: 0.75rem;
.mx-3margin-left: 0.75rem; margin-right: 0.75rem;
.my-4margin-top: 1rem; margin-bottom: 1rem;
.mx-4margin-left: 1rem; margin-right: 1rem;
.my-5margin-top: 1.25rem; margin-bottom: 1.25rem;
.mx-5margin-left: 1.25rem; margin-right: 1.25rem;
.my-6margin-top: 1.5rem; margin-bottom: 1.5rem;
.mx-6margin-left: 1.5rem; margin-right: 1.5rem;
.my-8margin-top: 2rem; margin-bottom: 2rem;
.mx-8margin-left: 2rem; margin-right: 2rem;
.my-10margin-top: 2.5rem; margin-bottom: 2.5rem;
.mx-10margin-left: 2.5rem; margin-right: 2.5rem;
.my-12margin-top: 3rem; margin-bottom: 3rem;
.mx-12margin-left: 3rem; margin-right: 3rem;
.my-16margin-top: 4rem; margin-bottom: 4rem;
.mx-16margin-left: 4rem; margin-right: 4rem;
.my-20margin-top: 5rem; margin-bottom: 5rem;
.mx-20margin-left: 5rem; margin-right: 5rem;
.my-24margin-top: 6rem; margin-bottom: 6rem;
.mx-24margin-left: 6rem; margin-right: 6rem;
.my-32margin-top: 8rem; margin-bottom: 8rem;
.mx-32margin-left: 8rem; margin-right: 8rem;
.my-40margin-top: 10rem; margin-bottom: 10rem;
.mx-40margin-left: 10rem; margin-right: 10rem;
.my-48margin-top: 12rem; margin-bottom: 12rem;
.mx-48margin-left: 12rem; margin-right: 12rem;
.my-56margin-top: 14rem; margin-bottom: 14rem;
.mx-56margin-left: 14rem; margin-right: 14rem;
.my-64margin-top: 16rem; margin-bottom: 16rem;
.mx-64margin-left: 16rem; margin-right: 16rem;
.my-automargin-top: auto; margin-bottom: auto;
.mx-automargin-left: auto; margin-right: auto;
.my-pxmargin-top: 1px; margin-bottom: 1px;
.mx-pxmargin-left: 1px; margin-right: 1px;
.-my-1margin-top: -0.25rem; margin-bottom: -0.25rem;
.-mx-1margin-left: -0.25rem; margin-right: -0.25rem;
.-my-2margin-top: -0.5rem; margin-bottom: -0.5rem;
.-mx-2margin-left: -0.5rem; margin-right: -0.5rem;
.-my-3margin-top: -0.75rem; margin-bottom: -0.75rem;
.-mx-3margin-left: -0.75rem; margin-right: -0.75rem;
.-my-4margin-top: -1rem; margin-bottom: -1rem;
.-mx-4margin-left: -1rem; margin-right: -1rem;
.-my-5margin-top: -1.25rem; margin-bottom: -1.25rem;
.-mx-5margin-left: -1.25rem; margin-right: -1.25rem;
.-my-6margin-top: -1.5rem; margin-bottom: -1.5rem;
.-mx-6margin-left: -1.5rem; margin-right: -1.5rem;
.-my-8margin-top: -2rem; margin-bottom: -2rem;
.-mx-8margin-left: -2rem; margin-right: -2rem;
.-my-10margin-top: -2.5rem; margin-bottom: -2.5rem;
.-mx-10margin-left: -2.5rem; margin-right: -2.5rem;
.-my-12margin-top: -3rem; margin-bottom: -3rem;
.-mx-12margin-left: -3rem; margin-right: -3rem;
.-my-16margin-top: -4rem; margin-bottom: -4rem;
.-mx-16margin-left: -4rem; margin-right: -4rem;
.-my-20margin-top: -5rem; margin-bottom: -5rem;
.-mx-20margin-left: -5rem; margin-right: -5rem;
.-my-24margin-top: -6rem; margin-bottom: -6rem;
.-mx-24margin-left: -6rem; margin-right: -6rem;
.-my-32margin-top: -8rem; margin-bottom: -8rem;
.-mx-32margin-left: -8rem; margin-right: -8rem;
.-my-40margin-top: -10rem; margin-bottom: -10rem;
.-mx-40margin-left: -10rem; margin-right: -10rem;
.-my-48margin-top: -12rem; margin-bottom: -12rem;
.-mx-48margin-left: -12rem; margin-right: -12rem;
.-my-56margin-top: -14rem; margin-bottom: -14rem;
.-mx-56margin-left: -14rem; margin-right: -14rem;
.-my-64margin-top: -16rem; margin-bottom: -16rem;
.-mx-64margin-left: -16rem; margin-right: -16rem;
.-my-pxmargin-top: -1px; margin-bottom: -1px;
.-mx-pxmargin-left: -1px; margin-right: -1px;
.mt-0margin-top: 0;
.mr-0margin-right: 0;
.mb-0margin-bottom: 0;
.ml-0margin-left: 0;
.mt-1margin-top: 0.25rem;
.mr-1margin-right: 0.25rem;
.mb-1margin-bottom: 0.25rem;
.ml-1margin-left: 0.25rem;
.mt-2margin-top: 0.5rem;
.mr-2margin-right: 0.5rem;
.mb-2margin-bottom: 0.5rem;
.ml-2margin-left: 0.5rem;
.mt-3margin-top: 0.75rem;
.mr-3margin-right: 0.75rem;
.mb-3margin-bottom: 0.75rem;
.ml-3margin-left: 0.75rem;
.mt-4margin-top: 1rem;
.mr-4margin-right: 1rem;
.mb-4margin-bottom: 1rem;
.ml-4margin-left: 1rem;
.mt-5margin-top: 1.25rem;
.mr-5margin-right: 1.25rem;
.mb-5margin-bottom: 1.25rem;
.ml-5margin-left: 1.25rem;
.mt-6margin-top: 1.5rem;
.mr-6margin-right: 1.5rem;
.mb-6margin-bottom: 1.5rem;
.ml-6margin-left: 1.5rem;
.mt-8margin-top: 2rem;
.mr-8margin-right: 2rem;
.mb-8margin-bottom: 2rem;
.ml-8margin-left: 2rem;
.mt-10margin-top: 2.5rem;
.mr-10margin-right: 2.5rem;
.mb-10margin-bottom: 2.5rem;
.ml-10margin-left: 2.5rem;
.mt-12margin-top: 3rem;
.mr-12margin-right: 3rem;
.mb-12margin-bottom: 3rem;
.ml-12margin-left: 3rem;
.mt-16margin-top: 4rem;
.mr-16margin-right: 4rem;
.mb-16margin-bottom: 4rem;
.ml-16margin-left: 4rem;
.mt-20margin-top: 5rem;
.mr-20margin-right: 5rem;
.mb-20margin-bottom: 5rem;
.ml-20margin-left: 5rem;
.mt-24margin-top: 6rem;
.mr-24margin-right: 6rem;
.mb-24margin-bottom: 6rem;
.ml-24margin-left: 6rem;
.mt-32margin-top: 8rem;
.mr-32margin-right: 8rem;
.mb-32margin-bottom: 8rem;
.ml-32margin-left: 8rem;
.mt-40margin-top: 10rem;
.mr-40margin-right: 10rem;
.mb-40margin-bottom: 10rem;
.ml-40margin-left: 10rem;
.mt-48margin-top: 12rem;
.mr-48margin-right: 12rem;
.mb-48margin-bottom: 12rem;
.ml-48margin-left: 12rem;
.mt-56margin-top: 14rem;
.mr-56margin-right: 14rem;
.mb-56margin-bottom: 14rem;
.ml-56margin-left: 14rem;
.mt-64margin-top: 16rem;
.mr-64margin-right: 16rem;
.mb-64margin-bottom: 16rem;
.ml-64margin-left: 16rem;
.mt-automargin-top: auto;
.mr-automargin-right: auto;
.mb-automargin-bottom: auto;
.ml-automargin-left: auto;
.mt-pxmargin-top: 1px;
.mr-pxmargin-right: 1px;
.mb-pxmargin-bottom: 1px;
.ml-pxmargin-left: 1px;
.-mt-1margin-top: -0.25rem;
.-mr-1margin-right: -0.25rem;
.-mb-1margin-bottom: -0.25rem;
.-ml-1margin-left: -0.25rem;
.-mt-2margin-top: -0.5rem;
.-mr-2margin-right: -0.5rem;
.-mb-2margin-bottom: -0.5rem;
.-ml-2margin-left: -0.5rem;
.-mt-3margin-top: -0.75rem;
.-mr-3margin-right: -0.75rem;
.-mb-3margin-bottom: -0.75rem;
.-ml-3margin-left: -0.75rem;
.-mt-4margin-top: -1rem;
.-mr-4margin-right: -1rem;
.-mb-4margin-bottom: -1rem;
.-ml-4margin-left: -1rem;
.-mt-5margin-top: -1.25rem;
.-mr-5margin-right: -1.25rem;
.-mb-5margin-bottom: -1.25rem;
.-ml-5margin-left: -1.25rem;
.-mt-6margin-top: -1.5rem;
.-mr-6margin-right: -1.5rem;
.-mb-6margin-bottom: -1.5rem;
.-ml-6margin-left: -1.5rem;
.-mt-8margin-top: -2rem;
.-mr-8margin-right: -2rem;
.-mb-8margin-bottom: -2rem;
.-ml-8margin-left: -2rem;
.-mt-10margin-top: -2.5rem;
.-mr-10margin-right: -2.5rem;
.-mb-10margin-bottom: -2.5rem;
.-ml-10margin-left: -2.5rem;
.-mt-12margin-top: -3rem;
.-mr-12margin-right: -3rem;
.-mb-12margin-bottom: -3rem;
.-ml-12margin-left: -3rem;
.-mt-16margin-top: -4rem;
.-mr-16margin-right: -4rem;
.-mb-16margin-bottom: -4rem;
.-ml-16margin-left: -4rem;
.-mt-20margin-top: -5rem;
.-mr-20margin-right: -5rem;
.-mb-20margin-bottom: -5rem;
.-ml-20margin-left: -5rem;
.-mt-24margin-top: -6rem;
.-mr-24margin-right: -6rem;
.-mb-24margin-bottom: -6rem;
.-ml-24margin-left: -6rem;
.-mt-32margin-top: -8rem;
.-mr-32margin-right: -8rem;
.-mb-32margin-bottom: -8rem;
.-ml-32margin-left: -8rem;
.-mt-40margin-top: -10rem;
.-mr-40margin-right: -10rem;
.-mb-40margin-bottom: -10rem;
.-ml-40margin-left: -10rem;
.-mt-48margin-top: -12rem;
.-mr-48margin-right: -12rem;
.-mb-48margin-bottom: -12rem;
.-ml-48margin-left: -12rem;
.-mt-56margin-top: -14rem;
.-mr-56margin-right: -14rem;
.-mb-56margin-bottom: -14rem;
.-ml-56margin-left: -14rem;
.-mt-64margin-top: -16rem;
.-mr-64margin-right: -16rem;
.-mb-64margin-bottom: -16rem;
.-ml-64margin-left: -16rem;
.-mt-pxmargin-top: -1px;
.-mr-pxmargin-right: -1px;
.-mb-pxmargin-bottom: -1px;
.-ml-pxmargin-left: -1px;

Add margin to a single side

m{t|r|b|l}-{size}ユーティリティを使用して、要素の片側のマージンを制御します。

たとえば、mt-6は要素の上部に1.5remのマージンを追加し、mr-4は要素の右側に1remのマージンを追加し、mb-8は要素の下部に2remのマージンがあり、ml-2は要素の左側に0.5remのマージンを追加します。

mt-8

Target

mr-8

Target

mb-8

Target

ml-8

Target
<div class="bg-gray-400"><span class="mt-8 bg-yellow-200">Target</span></div>
<div class="bg-gray-400"><span class="mr-8 bg-yellow-200">Target</span></div>
<div class="bg-gray-400"><span class="mb-8 bg-yellow-200">Target</span></div>
<div class="bg-gray-400"><span class="ml-8 bg-yellow-200">Target</span></div>

Add horizontal margin

mx-{size}ユーティリティを使用して要素の水平マージンを制御します。

mx-8

Target
<div class="bg-gray-400"><span class="mx-8 bg-yellow-200">Target</span></div>

Add vertical margin

my-{size}ユーティリティを使用して要素の垂直マージンを制御します。

my-8

Target
<div class="bg-gray-400"><span class="my-8 bg-yellow-200">Target</span></div>

Add margin to all sides

m-{size}ユーティリティを使用して、要素のすべての辺のマージンを制御します。

m-8

Target
<div class="bg-gray-400"><span class="m-8 bg-yellow-200">Target</span></div>

Negative margins

-m{side?}-{size}ユーティリティを使用して、要素の負のマージンを制御します。

-mt-8
<div class="bg-gray-400 h-16 w-32"></div>
<div class="-mt-8 bg-yellow-200 mx-auto h-16 w-24 ...">
  -mt-8
</div>

レスポンシブ

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

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

<div class="bg-gray-400 ...">
  <span class="mt-8 sm:mr-6 md:mb-4 lg:ml-2 xl:m-0 bg-yellow-200">Target</span>
</div>
Target

カスタマイズ

Margin scale

デフォルトでは、Tailwindは各辺と軸に20のマージンユーティリティを提供します。

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

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

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

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

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

Negative values

負のマージンクラスを追加する場合(-m{side?}-{size}の形式をとる)、コンフィグファイルのキーの前にダッシュ('-')を付けます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        margin: {
+         '-72': '-18rem',
        }
      }
    }
  }

Tailwindはスマートなので、先頭のダッシュが表示されたときにあなたが予測したようなmx--72ではなく、-mx-72のようなクラスを生成します。

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!