「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Margin (外距)

控制元素外邊距的功能

Default class reference

Class
屬性
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 個定義好的外距功能。

如果你想把自訂的數值一次設定在 padding、margin、width 以及 height 上的話,請在你的 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

負值

如果你想增加額外的負外距 class (使用方法 -m{side?}-{size}),請在你配置檔中的鍵值 (key) 前加上 - 做為前綴詞。

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

因為 Tailwind 夠聰明,所以會發現前面有個負號,並且在生成 class 時將其命名為 -mx-72,而不是你所想像的 mx--72

變化模式

默認情況下, 只有 響應式 的 margin 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 margin 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

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

停用

如果你不打算在專案中使用 margin 功能,可以在你的設定檔裡的 corePlugins 屬性中將 margin 設定為 false 來停用功能:

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