Margin

Tailwind CSSにはマージン(要素の外側の余白)を制御するためのユーティリティクラスが用意されています。この記事では、Tailwind CSSでマージンを指定する方法をご紹介します。

Cheat sheet

各項目を選ぶことで、任意のマージンを作成できます。

HTML

<div class="">
Margin
</div>

サンプル

Margin

Class

マージンを制御するために、Tailwind CSSは次のユーティリティクラスを提供しています。

Tailwind CSSのMarginクラス
クラス CSSプロパティ
m-auto margin: auto;
m-0 margin: 0;
m-1 margin: 0.25rem;
m-2 margin: 0.5rem;
m-3 margin: 0.75rem;
m-4 margin: 1rem;
m-6 margin: 1.5rem;
m-8 margin: 2rem;
m-10 margin: 2.5rem;
m-12 margin: 3rem;
m-16 margin: 4rem;
m-20 margin: 5rem;
m-24 margin: 6rem;
m-32 margin: 8rem;
m-40 margin: 10rem;
m-48 margin: 12rem;
m-56 margin: 14rem;
m-64 margin: 16rem;
mt-auto margin-top: auto;
mt-0 margin-top: 0;
mt-1 margin-top: 0.25rem;
mt-2 margin-top: 0.5rem;
mt-3 margin-top: 0.75rem;
mt-4 margin-top: 1rem;
mt-6 margin-top: 1.5rem;
mt-8 margin-top: 2rem;
mt-10 margin-top: 2.5rem;
mt-12 margin-top: 3rem;
mt-16 margin-top: 4rem;
mt-20 margin-top: 5rem;
mt-24 margin-top: 6rem;
mt-32 margin-top: 8rem;
mt-40 margin-top: 10rem;
mt-48 margin-top: 12rem;
mt-56 margin-top: 14rem;
mt-64 margin-top: 16rem;
mr-auto margin-right: auto;
mr-0 margin-right: 0;
mr-1 margin-right: 0.25rem;
mr-2 margin-right: 0.5rem;
mr-3 margin-right: 0.75rem;
mr-4 margin-right: 1rem;
mr-6 margin-right: 1.5rem;
mr-8 margin-right: 2rem;
mr-10 margin-right: 2.5rem;
mr-12 margin-right: 3rem;
mr-16 margin-right: 4rem;
mr-20 margin-right: 5rem;
mr-24 margin-right: 6rem;
mr-32 margin-right: 8rem;
mr-40 margin-right: 10rem;
mr-48 margin-right: 12rem;
mr-56 margin-right: 14rem;
mr-64 margin-right: 16rem;
mb-auto margin-bottom: auto;
mb-0 margin-bottom: 0;
mb-1 margin-bottom: 0.25rem;
mb-2 margin-bottom: 0.5rem;
mb-3 margin-bottom: 0.75rem;
mb-4 margin-bottom: 1rem;
mb-6 margin-bottom: 1.5rem;
mb-8 margin-bottom: 2rem;
mb-10 margin-bottom: 2.5rem;
mb-12 margin-bottom: 3rem;
mb-16 margin-bottom: 4rem;
mb-20 margin-bottom: 5rem;
mb-24 margin-bottom: 6rem;
mb-32 margin-bottom: 8rem;
mb-40 margin-bottom: 10rem;
mb-48 margin-bottom: 12rem;
mb-56 margin-bottom: 14rem;
mb-64 margin-bottom: 16rem;
ml-auto margin-left: auto;
ml-0 margin-left: 0;
ml-1 margin-left: 0.25rem;
ml-2 margin-left: 0.5rem;
ml-3 margin-left-left: 0.75rem;
ml-4 margin-left: 1rem;
ml-6 margin-left: 1.5rem;
ml-8 margin-left: 2rem;
ml-10 margin-left: 2.5rem;
ml-12 margin-left: 3rem;
ml-16 margin-left: 4rem;
ml-20 margin-left: 5rem;
ml-24 margin-left: 6rem;
ml-32 margin-left: 8rem;
ml-40 margin-left: 10rem;
ml-48 margin-left: 12rem;
ml-56 margin-left: 14rem;
ml-64 margin-left: 16rem;
mx-auto margin-right: auto;
margin-left: auto;
mx-0 margin-right: 0;
margin-left: 0;
mx-1 margin-right: 0.25rem;
margin-left: 0.25rem;
mx-2 margin-right: 0.5rem;
margin-left: 0.5rem;
mx-3 margin-right: 0.75rem;
margin-left: 0.75rem;
mx-4 margin-right: 1rem;
margin-left: 1rem;
mx-5 margin-right: 1.25rem;
margin-left: 1.25rem;
mx-6 margin-right: 1.5rem;
margin-left: 1.5rem;
mx-8 margin-right: 2rem;
margin-left: 2remrem;
mx-10 margin-right: 2.5rem;
margin-left: 2.5rem;
mx-12 margin-right: 3rem;
margin-left: 3rem;
mx-16 margin-right: 4rem;
margin-left: 4rem;
mx-20 margin-right: 5rem;
margin-left: 5rem;
mx-24 margin-right: 6rem;
margin-left: 6rem;
mx-32 margin-right: 8rem;
margin-left: 8rem;
mx-40 margin-right: 10rem;
margin-left: 10rem;
mx-48 margin-right: 12rem;
margin-left: 12rem;
mx-56 margin-right: 14rem;
margin-left: 14rem;
mx-64 margin-right: 16rem;
margin-left: 16rem;
my-auto margin-top: auto;
margin-bottom: auto;
my-0 margin-top: 0;
margin-bottom: 0;
my-1 margin-top: 0.25rem;
margin-bottom: 0.25rem;
my-2 margin-top: 0.5rem;
margin-bottom: 0.5rem;
my-3 margin-top: 0.75rem;
margin-bottom: 0.75rem;
my-4 margin-top: 1rem;
margin-bottom: 1rem;
my-5 margin-top: 1.25rem;
margin-bottom: 1.25rem;
my-6 margin-top: 1.5rem;
margin-bottom: 1.5rem;
my-8 margin-top: 2rem;
margin-bottom: 2remrem;
my-10 margin-top: 2.5rem;
margin-bottom: 2.5rem;
my-12 margin-top: 3rem;
margin-bottom: 3rem;
my-16 margin-top: 4rem;
margin-bottom: 4rem;
my-20 margin-top: 5rem;
margin-bottom: 5rem;
my-24 margin-top: 6rem;
margin-bottom: 6rem;
my-32 margin-top: 8rem;
margin-bottom: 8rem;
my-40 margin-top: 10rem;
margin-bottom: 10rem;
my-48 margin-top: 12rem;
margin-bottom: 12rem;
my-56 margin-top: 14rem;
margin-bottom: 14rem;
my-64 margin-top: 16rem;
margin-bottom: 16rem;