Just-in-Time: Следующее поколение Tailwind CSS
Tailwind CSS на GitHubTailwind CSS в Telegram

Отступы

Утилиты для управления отступами элемента.

Справочник классов по умолчанию

Класс
Свойства
m-0margin: 0px;
m-pxmargin: 1px;
m-0.5margin: 0.125rem;
m-1margin: 0.25rem;
m-1.5margin: 0.375rem;
m-2margin: 0.5rem;
m-2.5margin: 0.625rem;
m-3margin: 0.75rem;
m-3.5margin: 0.875rem;
m-4margin: 1rem;
m-5margin: 1.25rem;
m-6margin: 1.5rem;
m-7margin: 1.75rem;
m-8margin: 2rem;
m-9margin: 2.25rem;
m-10margin: 2.5rem;
m-11margin: 2.75rem;
m-12margin: 3rem;
m-14margin: 3.5rem;
m-16margin: 4rem;
m-20margin: 5rem;
m-24margin: 6rem;
m-28margin: 7rem;
m-32margin: 8rem;
m-36margin: 9rem;
m-40margin: 10rem;
m-44margin: 11rem;
m-48margin: 12rem;
m-52margin: 13rem;
m-56margin: 14rem;
m-60margin: 15rem;
m-64margin: 16rem;
m-72margin: 18rem;
m-80margin: 20rem;
m-96margin: 24rem;
m-automargin: auto;
-m-0margin: 0px;
-m-pxmargin: -1px;
-m-0.5margin: -0.125rem;
-m-1margin: -0.25rem;
-m-1.5margin: -0.375rem;
-m-2margin: -0.5rem;
-m-2.5margin: -0.625rem;
-m-3margin: -0.75rem;
-m-3.5margin: -0.875rem;
-m-4margin: -1rem;
-m-5margin: -1.25rem;
-m-6margin: -1.5rem;
-m-7margin: -1.75rem;
-m-8margin: -2rem;
-m-9margin: -2.25rem;
-m-10margin: -2.5rem;
-m-11margin: -2.75rem;
-m-12margin: -3rem;
-m-14margin: -3.5rem;
-m-16margin: -4rem;
-m-20margin: -5rem;
-m-24margin: -6rem;
-m-28margin: -7rem;
-m-32margin: -8rem;
-m-36margin: -9rem;
-m-40margin: -10rem;
-m-44margin: -11rem;
-m-48margin: -12rem;
-m-52margin: -13rem;
-m-56margin: -14rem;
-m-60margin: -15rem;
-m-64margin: -16rem;
-m-72margin: -18rem;
-m-80margin: -20rem;
-m-96margin: -24rem;
mx-0margin-left: 0px; margin-right: 0px;
mx-pxmargin-left: 1px; margin-right: 1px;
mx-0.5margin-left: 0.125rem; margin-right: 0.125rem;
mx-1margin-left: 0.25rem; margin-right: 0.25rem;
mx-1.5margin-left: 0.375rem; margin-right: 0.375rem;
mx-2margin-left: 0.5rem; margin-right: 0.5rem;
mx-2.5margin-left: 0.625rem; margin-right: 0.625rem;
mx-3margin-left: 0.75rem; margin-right: 0.75rem;
mx-3.5margin-left: 0.875rem; margin-right: 0.875rem;
mx-4margin-left: 1rem; margin-right: 1rem;
mx-5margin-left: 1.25rem; margin-right: 1.25rem;
mx-6margin-left: 1.5rem; margin-right: 1.5rem;
mx-7margin-left: 1.75rem; margin-right: 1.75rem;
mx-8margin-left: 2rem; margin-right: 2rem;
mx-9margin-left: 2.25rem; margin-right: 2.25rem;
mx-10margin-left: 2.5rem; margin-right: 2.5rem;
mx-11margin-left: 2.75rem; margin-right: 2.75rem;
mx-12margin-left: 3rem; margin-right: 3rem;
mx-14margin-left: 3.5rem; margin-right: 3.5rem;
mx-16margin-left: 4rem; margin-right: 4rem;
mx-20margin-left: 5rem; margin-right: 5rem;
mx-24margin-left: 6rem; margin-right: 6rem;
mx-28margin-left: 7rem; margin-right: 7rem;
mx-32margin-left: 8rem; margin-right: 8rem;
mx-36margin-left: 9rem; margin-right: 9rem;
mx-40margin-left: 10rem; margin-right: 10rem;
mx-44margin-left: 11rem; margin-right: 11rem;
mx-48margin-left: 12rem; margin-right: 12rem;
mx-52margin-left: 13rem; margin-right: 13rem;
mx-56margin-left: 14rem; margin-right: 14rem;
mx-60margin-left: 15rem; margin-right: 15rem;
mx-64margin-left: 16rem; margin-right: 16rem;
mx-72margin-left: 18rem; margin-right: 18rem;
mx-80margin-left: 20rem; margin-right: 20rem;
mx-96margin-left: 24rem; margin-right: 24rem;
mx-automargin-left: auto; margin-right: auto;
-mx-0margin-left: 0px; margin-right: 0px;
-mx-pxmargin-left: -1px; margin-right: -1px;
-mx-0.5margin-left: -0.125rem; margin-right: -0.125rem;
-mx-1margin-left: -0.25rem; margin-right: -0.25rem;
-mx-1.5margin-left: -0.375rem; margin-right: -0.375rem;
-mx-2margin-left: -0.5rem; margin-right: -0.5rem;
-mx-2.5margin-left: -0.625rem; margin-right: -0.625rem;
-mx-3margin-left: -0.75rem; margin-right: -0.75rem;
-mx-3.5margin-left: -0.875rem; margin-right: -0.875rem;
-mx-4margin-left: -1rem; margin-right: -1rem;
-mx-5margin-left: -1.25rem; margin-right: -1.25rem;
-mx-6margin-left: -1.5rem; margin-right: -1.5rem;
-mx-7margin-left: -1.75rem; margin-right: -1.75rem;
-mx-8margin-left: -2rem; margin-right: -2rem;
-mx-9margin-left: -2.25rem; margin-right: -2.25rem;
-mx-10margin-left: -2.5rem; margin-right: -2.5rem;
-mx-11margin-left: -2.75rem; margin-right: -2.75rem;
-mx-12margin-left: -3rem; margin-right: -3rem;
-mx-14margin-left: -3.5rem; margin-right: -3.5rem;
-mx-16margin-left: -4rem; margin-right: -4rem;
-mx-20margin-left: -5rem; margin-right: -5rem;
-mx-24margin-left: -6rem; margin-right: -6rem;
-mx-28margin-left: -7rem; margin-right: -7rem;
-mx-32margin-left: -8rem; margin-right: -8rem;
-mx-36margin-left: -9rem; margin-right: -9rem;
-mx-40margin-left: -10rem; margin-right: -10rem;
-mx-44margin-left: -11rem; margin-right: -11rem;
-mx-48margin-left: -12rem; margin-right: -12rem;
-mx-52margin-left: -13rem; margin-right: -13rem;
-mx-56margin-left: -14rem; margin-right: -14rem;
-mx-60margin-left: -15rem; margin-right: -15rem;
-mx-64margin-left: -16rem; margin-right: -16rem;
-mx-72margin-left: -18rem; margin-right: -18rem;
-mx-80margin-left: -20rem; margin-right: -20rem;
-mx-96margin-left: -24rem; margin-right: -24rem;
my-0margin-top: 0px; margin-bottom: 0px;
my-pxmargin-top: 1px; margin-bottom: 1px;
my-0.5margin-top: 0.125rem; margin-bottom: 0.125rem;
my-1margin-top: 0.25rem; margin-bottom: 0.25rem;
my-1.5margin-top: 0.375rem; margin-bottom: 0.375rem;
my-2margin-top: 0.5rem; margin-bottom: 0.5rem;
my-2.5margin-top: 0.625rem; margin-bottom: 0.625rem;
my-3margin-top: 0.75rem; margin-bottom: 0.75rem;
my-3.5margin-top: 0.875rem; margin-bottom: 0.875rem;
my-4margin-top: 1rem; margin-bottom: 1rem;
my-5margin-top: 1.25rem; margin-bottom: 1.25rem;
my-6margin-top: 1.5rem; margin-bottom: 1.5rem;
my-7margin-top: 1.75rem; margin-bottom: 1.75rem;
my-8margin-top: 2rem; margin-bottom: 2rem;
my-9margin-top: 2.25rem; margin-bottom: 2.25rem;
my-10margin-top: 2.5rem; margin-bottom: 2.5rem;
my-11margin-top: 2.75rem; margin-bottom: 2.75rem;
my-12margin-top: 3rem; margin-bottom: 3rem;
my-14margin-top: 3.5rem; margin-bottom: 3.5rem;
my-16margin-top: 4rem; margin-bottom: 4rem;
my-20margin-top: 5rem; margin-bottom: 5rem;
my-24margin-top: 6rem; margin-bottom: 6rem;
my-28margin-top: 7rem; margin-bottom: 7rem;
my-32margin-top: 8rem; margin-bottom: 8rem;
my-36margin-top: 9rem; margin-bottom: 9rem;
my-40margin-top: 10rem; margin-bottom: 10rem;
my-44margin-top: 11rem; margin-bottom: 11rem;
my-48margin-top: 12rem; margin-bottom: 12rem;
my-52margin-top: 13rem; margin-bottom: 13rem;
my-56margin-top: 14rem; margin-bottom: 14rem;
my-60margin-top: 15rem; margin-bottom: 15rem;
my-64margin-top: 16rem; margin-bottom: 16rem;
my-72margin-top: 18rem; margin-bottom: 18rem;
my-80margin-top: 20rem; margin-bottom: 20rem;
my-96margin-top: 24rem; margin-bottom: 24rem;
my-automargin-top: auto; margin-bottom: auto;
-my-0margin-top: 0px; margin-bottom: 0px;
-my-pxmargin-top: -1px; margin-bottom: -1px;
-my-0.5margin-top: -0.125rem; margin-bottom: -0.125rem;
-my-1margin-top: -0.25rem; margin-bottom: -0.25rem;
-my-1.5margin-top: -0.375rem; margin-bottom: -0.375rem;
-my-2margin-top: -0.5rem; margin-bottom: -0.5rem;
-my-2.5margin-top: -0.625rem; margin-bottom: -0.625rem;
-my-3margin-top: -0.75rem; margin-bottom: -0.75rem;
-my-3.5margin-top: -0.875rem; margin-bottom: -0.875rem;
-my-4margin-top: -1rem; margin-bottom: -1rem;
-my-5margin-top: -1.25rem; margin-bottom: -1.25rem;
-my-6margin-top: -1.5rem; margin-bottom: -1.5rem;
-my-7margin-top: -1.75rem; margin-bottom: -1.75rem;
-my-8margin-top: -2rem; margin-bottom: -2rem;
-my-9margin-top: -2.25rem; margin-bottom: -2.25rem;
-my-10margin-top: -2.5rem; margin-bottom: -2.5rem;
-my-11margin-top: -2.75rem; margin-bottom: -2.75rem;
-my-12margin-top: -3rem; margin-bottom: -3rem;
-my-14margin-top: -3.5rem; margin-bottom: -3.5rem;
-my-16margin-top: -4rem; margin-bottom: -4rem;
-my-20margin-top: -5rem; margin-bottom: -5rem;
-my-24margin-top: -6rem; margin-bottom: -6rem;
-my-28margin-top: -7rem; margin-bottom: -7rem;
-my-32margin-top: -8rem; margin-bottom: -8rem;
-my-36margin-top: -9rem; margin-bottom: -9rem;
-my-40margin-top: -10rem; margin-bottom: -10rem;
-my-44margin-top: -11rem; margin-bottom: -11rem;
-my-48margin-top: -12rem; margin-bottom: -12rem;
-my-52margin-top: -13rem; margin-bottom: -13rem;
-my-56margin-top: -14rem; margin-bottom: -14rem;
-my-60margin-top: -15rem; margin-bottom: -15rem;
-my-64margin-top: -16rem; margin-bottom: -16rem;
-my-72margin-top: -18rem; margin-bottom: -18rem;
-my-80margin-top: -20rem; margin-bottom: -20rem;
-my-96margin-top: -24rem; margin-bottom: -24rem;
mt-0margin-top: 0px;
mt-pxmargin-top: 1px;
mt-0.5margin-top: 0.125rem;
mt-1margin-top: 0.25rem;
mt-1.5margin-top: 0.375rem;
mt-2margin-top: 0.5rem;
mt-2.5margin-top: 0.625rem;
mt-3margin-top: 0.75rem;
mt-3.5margin-top: 0.875rem;
mt-4margin-top: 1rem;
mt-5margin-top: 1.25rem;
mt-6margin-top: 1.5rem;
mt-7margin-top: 1.75rem;
mt-8margin-top: 2rem;
mt-9margin-top: 2.25rem;
mt-10margin-top: 2.5rem;
mt-11margin-top: 2.75rem;
mt-12margin-top: 3rem;
mt-14margin-top: 3.5rem;
mt-16margin-top: 4rem;
mt-20margin-top: 5rem;
mt-24margin-top: 6rem;
mt-28margin-top: 7rem;
mt-32margin-top: 8rem;
mt-36margin-top: 9rem;
mt-40margin-top: 10rem;
mt-44margin-top: 11rem;
mt-48margin-top: 12rem;
mt-52margin-top: 13rem;
mt-56margin-top: 14rem;
mt-60margin-top: 15rem;
mt-64margin-top: 16rem;
mt-72margin-top: 18rem;
mt-80margin-top: 20rem;
mt-96margin-top: 24rem;
mt-automargin-top: auto;
-mt-0margin-top: 0px;
-mt-pxmargin-top: -1px;
-mt-0.5margin-top: -0.125rem;
-mt-1margin-top: -0.25rem;
-mt-1.5margin-top: -0.375rem;
-mt-2margin-top: -0.5rem;
-mt-2.5margin-top: -0.625rem;
-mt-3margin-top: -0.75rem;
-mt-3.5margin-top: -0.875rem;
-mt-4margin-top: -1rem;
-mt-5margin-top: -1.25rem;
-mt-6margin-top: -1.5rem;
-mt-7margin-top: -1.75rem;
-mt-8margin-top: -2rem;
-mt-9margin-top: -2.25rem;
-mt-10margin-top: -2.5rem;
-mt-11margin-top: -2.75rem;
-mt-12margin-top: -3rem;
-mt-14margin-top: -3.5rem;
-mt-16margin-top: -4rem;
-mt-20margin-top: -5rem;
-mt-24margin-top: -6rem;
-mt-28margin-top: -7rem;
-mt-32margin-top: -8rem;
-mt-36margin-top: -9rem;
-mt-40margin-top: -10rem;
-mt-44margin-top: -11rem;
-mt-48margin-top: -12rem;
-mt-52margin-top: -13rem;
-mt-56margin-top: -14rem;
-mt-60margin-top: -15rem;
-mt-64margin-top: -16rem;
-mt-72margin-top: -18rem;
-mt-80margin-top: -20rem;
-mt-96margin-top: -24rem;
mr-0margin-right: 0px;
mr-pxmargin-right: 1px;
mr-0.5margin-right: 0.125rem;
mr-1margin-right: 0.25rem;
mr-1.5margin-right: 0.375rem;
mr-2margin-right: 0.5rem;
mr-2.5margin-right: 0.625rem;
mr-3margin-right: 0.75rem;
mr-3.5margin-right: 0.875rem;
mr-4margin-right: 1rem;
mr-5margin-right: 1.25rem;
mr-6margin-right: 1.5rem;
mr-7margin-right: 1.75rem;
mr-8margin-right: 2rem;
mr-9margin-right: 2.25rem;
mr-10margin-right: 2.5rem;
mr-11margin-right: 2.75rem;
mr-12margin-right: 3rem;
mr-14margin-right: 3.5rem;
mr-16margin-right: 4rem;
mr-20margin-right: 5rem;
mr-24margin-right: 6rem;
mr-28margin-right: 7rem;
mr-32margin-right: 8rem;
mr-36margin-right: 9rem;
mr-40margin-right: 10rem;
mr-44margin-right: 11rem;
mr-48margin-right: 12rem;
mr-52margin-right: 13rem;
mr-56margin-right: 14rem;
mr-60margin-right: 15rem;
mr-64margin-right: 16rem;
mr-72margin-right: 18rem;
mr-80margin-right: 20rem;
mr-96margin-right: 24rem;
mr-automargin-right: auto;
-mr-0margin-right: 0px;
-mr-pxmargin-right: -1px;
-mr-0.5margin-right: -0.125rem;
-mr-1margin-right: -0.25rem;
-mr-1.5margin-right: -0.375rem;
-mr-2margin-right: -0.5rem;
-mr-2.5margin-right: -0.625rem;
-mr-3margin-right: -0.75rem;
-mr-3.5margin-right: -0.875rem;
-mr-4margin-right: -1rem;
-mr-5margin-right: -1.25rem;
-mr-6margin-right: -1.5rem;
-mr-7margin-right: -1.75rem;
-mr-8margin-right: -2rem;
-mr-9margin-right: -2.25rem;
-mr-10margin-right: -2.5rem;
-mr-11margin-right: -2.75rem;
-mr-12margin-right: -3rem;
-mr-14margin-right: -3.5rem;
-mr-16margin-right: -4rem;
-mr-20margin-right: -5rem;
-mr-24margin-right: -6rem;
-mr-28margin-right: -7rem;
-mr-32margin-right: -8rem;
-mr-36margin-right: -9rem;
-mr-40margin-right: -10rem;
-mr-44margin-right: -11rem;
-mr-48margin-right: -12rem;
-mr-52margin-right: -13rem;
-mr-56margin-right: -14rem;
-mr-60margin-right: -15rem;
-mr-64margin-right: -16rem;
-mr-72margin-right: -18rem;
-mr-80margin-right: -20rem;
-mr-96margin-right: -24rem;
mb-0margin-bottom: 0px;
mb-pxmargin-bottom: 1px;
mb-0.5margin-bottom: 0.125rem;
mb-1margin-bottom: 0.25rem;
mb-1.5margin-bottom: 0.375rem;
mb-2margin-bottom: 0.5rem;
mb-2.5margin-bottom: 0.625rem;
mb-3margin-bottom: 0.75rem;
mb-3.5margin-bottom: 0.875rem;
mb-4margin-bottom: 1rem;
mb-5margin-bottom: 1.25rem;
mb-6margin-bottom: 1.5rem;
mb-7margin-bottom: 1.75rem;
mb-8margin-bottom: 2rem;
mb-9margin-bottom: 2.25rem;
mb-10margin-bottom: 2.5rem;
mb-11margin-bottom: 2.75rem;
mb-12margin-bottom: 3rem;
mb-14margin-bottom: 3.5rem;
mb-16margin-bottom: 4rem;
mb-20margin-bottom: 5rem;
mb-24margin-bottom: 6rem;
mb-28margin-bottom: 7rem;
mb-32margin-bottom: 8rem;
mb-36margin-bottom: 9rem;
mb-40margin-bottom: 10rem;
mb-44margin-bottom: 11rem;
mb-48margin-bottom: 12rem;
mb-52margin-bottom: 13rem;
mb-56margin-bottom: 14rem;
mb-60margin-bottom: 15rem;
mb-64margin-bottom: 16rem;
mb-72margin-bottom: 18rem;
mb-80margin-bottom: 20rem;
mb-96margin-bottom: 24rem;
mb-automargin-bottom: auto;
-mb-0margin-bottom: 0px;
-mb-pxmargin-bottom: -1px;
-mb-0.5margin-bottom: -0.125rem;
-mb-1margin-bottom: -0.25rem;
-mb-1.5margin-bottom: -0.375rem;
-mb-2margin-bottom: -0.5rem;
-mb-2.5margin-bottom: -0.625rem;
-mb-3margin-bottom: -0.75rem;
-mb-3.5margin-bottom: -0.875rem;
-mb-4margin-bottom: -1rem;
-mb-5margin-bottom: -1.25rem;
-mb-6margin-bottom: -1.5rem;
-mb-7margin-bottom: -1.75rem;
-mb-8margin-bottom: -2rem;
-mb-9margin-bottom: -2.25rem;
-mb-10margin-bottom: -2.5rem;
-mb-11margin-bottom: -2.75rem;
-mb-12margin-bottom: -3rem;
-mb-14margin-bottom: -3.5rem;
-mb-16margin-bottom: -4rem;
-mb-20margin-bottom: -5rem;
-mb-24margin-bottom: -6rem;
-mb-28margin-bottom: -7rem;
-mb-32margin-bottom: -8rem;
-mb-36margin-bottom: -9rem;
-mb-40margin-bottom: -10rem;
-mb-44margin-bottom: -11rem;
-mb-48margin-bottom: -12rem;
-mb-52margin-bottom: -13rem;
-mb-56margin-bottom: -14rem;
-mb-60margin-bottom: -15rem;
-mb-64margin-bottom: -16rem;
-mb-72margin-bottom: -18rem;
-mb-80margin-bottom: -20rem;
-mb-96margin-bottom: -24rem;
ml-0margin-left: 0px;
ml-pxmargin-left: 1px;
ml-0.5margin-left: 0.125rem;
ml-1margin-left: 0.25rem;
ml-1.5margin-left: 0.375rem;
ml-2margin-left: 0.5rem;
ml-2.5margin-left: 0.625rem;
ml-3margin-left: 0.75rem;
ml-3.5margin-left: 0.875rem;
ml-4margin-left: 1rem;
ml-5margin-left: 1.25rem;
ml-6margin-left: 1.5rem;
ml-7margin-left: 1.75rem;
ml-8margin-left: 2rem;
ml-9margin-left: 2.25rem;
ml-10margin-left: 2.5rem;
ml-11margin-left: 2.75rem;
ml-12margin-left: 3rem;
ml-14margin-left: 3.5rem;
ml-16margin-left: 4rem;
ml-20margin-left: 5rem;
ml-24margin-left: 6rem;
ml-28margin-left: 7rem;
ml-32margin-left: 8rem;
ml-36margin-left: 9rem;
ml-40margin-left: 10rem;
ml-44margin-left: 11rem;
ml-48margin-left: 12rem;
ml-52margin-left: 13rem;
ml-56margin-left: 14rem;
ml-60margin-left: 15rem;
ml-64margin-left: 16rem;
ml-72margin-left: 18rem;
ml-80margin-left: 20rem;
ml-96margin-left: 24rem;
ml-automargin-left: auto;
-ml-0margin-left: 0px;
-ml-pxmargin-left: -1px;
-ml-0.5margin-left: -0.125rem;
-ml-1margin-left: -0.25rem;
-ml-1.5margin-left: -0.375rem;
-ml-2margin-left: -0.5rem;
-ml-2.5margin-left: -0.625rem;
-ml-3margin-left: -0.75rem;
-ml-3.5margin-left: -0.875rem;
-ml-4margin-left: -1rem;
-ml-5margin-left: -1.25rem;
-ml-6margin-left: -1.5rem;
-ml-7margin-left: -1.75rem;
-ml-8margin-left: -2rem;
-ml-9margin-left: -2.25rem;
-ml-10margin-left: -2.5rem;
-ml-11margin-left: -2.75rem;
-ml-12margin-left: -3rem;
-ml-14margin-left: -3.5rem;
-ml-16margin-left: -4rem;
-ml-20margin-left: -5rem;
-ml-24margin-left: -6rem;
-ml-28margin-left: -7rem;
-ml-32margin-left: -8rem;
-ml-36margin-left: -9rem;
-ml-40margin-left: -10rem;
-ml-44margin-left: -11rem;
-ml-48margin-left: -12rem;
-ml-52margin-left: -13rem;
-ml-56margin-left: -14rem;
-ml-60margin-left: -15rem;
-ml-64margin-left: -16rem;
-ml-72margin-left: -18rem;
-ml-80margin-left: -20rem;
-ml-96margin-left: -24rem;

Добавить отступ с одной стороны

Управляйте отступом на одной стороне элемента с помощью утилит m{t|r|b|l}-{size}.

Например, mt-6 добавит 1.5rem отступ элементу сверху, mr-4 добавит 1rem отступ элементу справа, mb-8 добавит 2rem отступ элементу снизу, и ml-2 добавит 0.5rem отступ элементу слева.

mt-8
mr-8
mb-8
ml-8
<div class="mt-8 ...">mt-8</div>
<div class="mr-8 ...">mr-8</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-8 ...">ml-8</div>

Добавить горизонтальный отступ

Управляйте горизонтальным отступом элемента с помощью утилит mx-{size}.

mx-8
<div class="mx-8 ...">mx-8</div>

Добавить вертикальный отступ

Управляйте вертикальным отступом элемента с помощью утилит my-{size}.

my-8
<div class="my-8 ...">my-8</div>

Добавить отступ для всех сторон

Контролируйте отступы со всех сторон элемента с помощью утилит m-{size}.

m-8
<div class="m-8 ...">m-8</div>

Отрицательные отступы

Управляйте отрицательным отступом элемента с помощью утилит -m{side?}-{size}.

-mt-8
<div class="w-32 h-16 bg-fuchsia-300 ..."></div>
<div class="-mt-8 bg-fuchsia-500 ...">-mt-8</div>

Адаптивность

Чтобы управлять отступом элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите отступа. Например, добавление класса md:my-8 к элементу приведет к применению утилиты my-8 при средних размерах экрана и выше.

<div class="mt-8 md:my-8">
    <!-- ... -->
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.


Кастомизация

Шкала отступов

По умолчанию Tailwind предоставляет 20 утилит отступов для каждой стороны и оси.

Если вы хотите настроить эти значения для заполнения, полей, ширины и высоты одновременно, используйте раздел theme.spacing Вашего файла tailwind.config.js.

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

Чтобы настроить только значения отступов, используйте раздел theme.margin Вашего файла tailwind.config.js.

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

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Отрицательные значения

Если вы хотите добавить дополнительные классы отрицательных отступов (принимающие форму -m{side?}-{size}), поставьте перед ключами в Вашем файле конфигурации дефис:

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

Tailwind достаточно умен, чтобы сгенерировать такие классы, как -mx-72, когда видит тире, а не mx--72, как вы могли ожидать.

Варианты

По умолчанию, только responsive варианты создаются для утилит margin.

Вы можете контролировать, какие варианты создаются для утилит margin для изменения свойства margin в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

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

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения margin, Вы можете полностью отключить их, установив для margin свойство значение false в разделе corePlugins Вашего файла конфигурации:

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