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

Space Between (元素間距)

控制子元素間距離的功能

Default class reference

Class
屬性
space-x-0 > * + *--tw-space-x-reverse: 0; margin-right: calc(0px * var(--tw-space-x-reverse)); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
space-x-0.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.125rem * var(--tw-space-x-reverse)); margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.375rem * var(--tw-space-x-reverse)); margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.625rem * var(--tw-space-x-reverse)); margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(0.875rem * var(--tw-space-x-reverse)); margin-left: calc(0.875rem * calc(1 - var(--tw-space-x-reverse)));
space-x-4 > * + *--tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
space-x-5 > * + *--tw-space-x-reverse: 0; margin-right: calc(1.25rem * var(--tw-space-x-reverse)); margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-6 > * + *--tw-space-x-reverse: 0; margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-7 > * + *--tw-space-x-reverse: 0; margin-right: calc(1.75rem * var(--tw-space-x-reverse)); margin-left: calc(1.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-8 > * + *--tw-space-x-reverse: 0; margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
space-x-9 > * + *--tw-space-x-reverse: 0; margin-right: calc(2.25rem * var(--tw-space-x-reverse)); margin-left: calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-10 > * + *--tw-space-x-reverse: 0; margin-right: calc(2.5rem * var(--tw-space-x-reverse)); margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-11 > * + *--tw-space-x-reverse: 0; margin-right: calc(2.75rem * var(--tw-space-x-reverse)); margin-left: calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-12 > * + *--tw-space-x-reverse: 0; margin-right: calc(3rem * var(--tw-space-x-reverse)); margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
space-x-14 > * + *--tw-space-x-reverse: 0; margin-right: calc(3.5rem * var(--tw-space-x-reverse)); margin-left: calc(3.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-16 > * + *--tw-space-x-reverse: 0; margin-right: calc(4rem * var(--tw-space-x-reverse)); margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
space-x-20 > * + *--tw-space-x-reverse: 0; margin-right: calc(5rem * var(--tw-space-x-reverse)); margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-24 > * + *--tw-space-x-reverse: 0; margin-right: calc(6rem * var(--tw-space-x-reverse)); margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
space-x-28 > * + *--tw-space-x-reverse: 0; margin-right: calc(7rem * var(--tw-space-x-reverse)); margin-left: calc(7rem * calc(1 - var(--tw-space-x-reverse)));
space-x-32 > * + *--tw-space-x-reverse: 0; margin-right: calc(8rem * var(--tw-space-x-reverse)); margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
space-x-36 > * + *--tw-space-x-reverse: 0; margin-right: calc(9rem * var(--tw-space-x-reverse)); margin-left: calc(9rem * calc(1 - var(--tw-space-x-reverse)));
space-x-40 > * + *--tw-space-x-reverse: 0; margin-right: calc(10rem * var(--tw-space-x-reverse)); margin-left: calc(10rem * calc(1 - var(--tw-space-x-reverse)));
space-x-44 > * + *--tw-space-x-reverse: 0; margin-right: calc(11rem * var(--tw-space-x-reverse)); margin-left: calc(11rem * calc(1 - var(--tw-space-x-reverse)));
space-x-48 > * + *--tw-space-x-reverse: 0; margin-right: calc(12rem * var(--tw-space-x-reverse)); margin-left: calc(12rem * calc(1 - var(--tw-space-x-reverse)));
space-x-52 > * + *--tw-space-x-reverse: 0; margin-right: calc(13rem * var(--tw-space-x-reverse)); margin-left: calc(13rem * calc(1 - var(--tw-space-x-reverse)));
space-x-56 > * + *--tw-space-x-reverse: 0; margin-right: calc(14rem * var(--tw-space-x-reverse)); margin-left: calc(14rem * calc(1 - var(--tw-space-x-reverse)));
space-x-60 > * + *--tw-space-x-reverse: 0; margin-right: calc(15rem * var(--tw-space-x-reverse)); margin-left: calc(15rem * calc(1 - var(--tw-space-x-reverse)));
space-x-64 > * + *--tw-space-x-reverse: 0; margin-right: calc(16rem * var(--tw-space-x-reverse)); margin-left: calc(16rem * calc(1 - var(--tw-space-x-reverse)));
space-x-72 > * + *--tw-space-x-reverse: 0; margin-right: calc(18rem * var(--tw-space-x-reverse)); margin-left: calc(18rem * calc(1 - var(--tw-space-x-reverse)));
space-x-80 > * + *--tw-space-x-reverse: 0; margin-right: calc(20rem * var(--tw-space-x-reverse)); margin-left: calc(20rem * calc(1 - var(--tw-space-x-reverse)));
space-x-96 > * + *--tw-space-x-reverse: 0; margin-right: calc(24rem * var(--tw-space-x-reverse)); margin-left: calc(24rem * calc(1 - var(--tw-space-x-reverse)));
space-x-px > * + *--tw-space-x-reverse: 0; margin-right: calc(1px * var(--tw-space-x-reverse)); margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse)));
space-x-reverse > * + *--tw-space-x-reverse: 1;
-space-x-0 > * + *--tw-space-x-reverse: 0; margin-right: calc(0px * var(--tw-space-x-reverse)); margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-space-x-0.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.125rem * var(--tw-space-x-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.25rem * var(--tw-space-x-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.375rem * var(--tw-space-x-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.5rem * var(--tw-space-x-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.625rem * var(--tw-space-x-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.75rem * var(--tw-space-x-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3.5 > * + *--tw-space-x-reverse: 0; margin-right: calc(-0.875rem * var(--tw-space-x-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-4 > * + *--tw-space-x-reverse: 0; margin-right: calc(-1rem * var(--tw-space-x-reverse)); margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-5 > * + *--tw-space-x-reverse: 0; margin-right: calc(-1.25rem * var(--tw-space-x-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-6 > * + *--tw-space-x-reverse: 0; margin-right: calc(-1.5rem * var(--tw-space-x-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-7 > * + *--tw-space-x-reverse: 0; margin-right: calc(-1.75rem * var(--tw-space-x-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-8 > * + *--tw-space-x-reverse: 0; margin-right: calc(-2rem * var(--tw-space-x-reverse)); margin-left: calc(-2rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-9 > * + *--tw-space-x-reverse: 0; margin-right: calc(-2.25rem * var(--tw-space-x-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-10 > * + *--tw-space-x-reverse: 0; margin-right: calc(-2.5rem * var(--tw-space-x-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-11 > * + *--tw-space-x-reverse: 0; margin-right: calc(-2.75rem * var(--tw-space-x-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-12 > * + *--tw-space-x-reverse: 0; margin-right: calc(-3rem * var(--tw-space-x-reverse)); margin-left: calc(-3rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-14 > * + *--tw-space-x-reverse: 0; margin-right: calc(-3.5rem * var(--tw-space-x-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-16 > * + *--tw-space-x-reverse: 0; margin-right: calc(-4rem * var(--tw-space-x-reverse)); margin-left: calc(-4rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-20 > * + *--tw-space-x-reverse: 0; margin-right: calc(-5rem * var(--tw-space-x-reverse)); margin-left: calc(-5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-24 > * + *--tw-space-x-reverse: 0; margin-right: calc(-6rem * var(--tw-space-x-reverse)); margin-left: calc(-6rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-28 > * + *--tw-space-x-reverse: 0; margin-right: calc(-7rem * var(--tw-space-x-reverse)); margin-left: calc(-7rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-32 > * + *--tw-space-x-reverse: 0; margin-right: calc(-8rem * var(--tw-space-x-reverse)); margin-left: calc(-8rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-36 > * + *--tw-space-x-reverse: 0; margin-right: calc(-9rem * var(--tw-space-x-reverse)); margin-left: calc(-9rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-40 > * + *--tw-space-x-reverse: 0; margin-right: calc(-10rem * var(--tw-space-x-reverse)); margin-left: calc(-10rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-44 > * + *--tw-space-x-reverse: 0; margin-right: calc(-11rem * var(--tw-space-x-reverse)); margin-left: calc(-11rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-48 > * + *--tw-space-x-reverse: 0; margin-right: calc(-12rem * var(--tw-space-x-reverse)); margin-left: calc(-12rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-52 > * + *--tw-space-x-reverse: 0; margin-right: calc(-13rem * var(--tw-space-x-reverse)); margin-left: calc(-13rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-56 > * + *--tw-space-x-reverse: 0; margin-right: calc(-14rem * var(--tw-space-x-reverse)); margin-left: calc(-14rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-60 > * + *--tw-space-x-reverse: 0; margin-right: calc(-15rem * var(--tw-space-x-reverse)); margin-left: calc(-15rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-64 > * + *--tw-space-x-reverse: 0; margin-right: calc(-16rem * var(--tw-space-x-reverse)); margin-left: calc(-16rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-72 > * + *--tw-space-x-reverse: 0; margin-right: calc(-18rem * var(--tw-space-x-reverse)); margin-left: calc(-18rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-80 > * + *--tw-space-x-reverse: 0; margin-right: calc(-20rem * var(--tw-space-x-reverse)); margin-left: calc(-20rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-96 > * + *--tw-space-x-reverse: 0; margin-right: calc(-24rem * var(--tw-space-x-reverse)); margin-left: calc(-24rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-px > * + *--tw-space-x-reverse: 0; margin-right: calc(-1px * var(--tw-space-x-reverse)); margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
space-y-0 > * + *--tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse));
space-y-0.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
space-y-1 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
space-y-1.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
space-y-2 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
space-y-2.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
space-y-3 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
space-y-3.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
space-y-4 > * + *--tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse));
space-y-5 > * + *--tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
space-y-6 > * + *--tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
space-y-7 > * + *--tw-space-y-reverse: 0; margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
space-y-8 > * + *--tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
space-y-9 > * + *--tw-space-y-reverse: 0; margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
space-y-10 > * + *--tw-space-y-reverse: 0; margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
space-y-11 > * + *--tw-space-y-reverse: 0; margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
space-y-12 > * + *--tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse));
space-y-14 > * + *--tw-space-y-reverse: 0; margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
space-y-16 > * + *--tw-space-y-reverse: 0; margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(4rem * var(--tw-space-y-reverse));
space-y-20 > * + *--tw-space-y-reverse: 0; margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(5rem * var(--tw-space-y-reverse));
space-y-24 > * + *--tw-space-y-reverse: 0; margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(6rem * var(--tw-space-y-reverse));
space-y-28 > * + *--tw-space-y-reverse: 0; margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(7rem * var(--tw-space-y-reverse));
space-y-32 > * + *--tw-space-y-reverse: 0; margin-top: calc(8rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(8rem * var(--tw-space-y-reverse));
space-y-36 > * + *--tw-space-y-reverse: 0; margin-top: calc(9rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(9rem * var(--tw-space-y-reverse));
space-y-40 > * + *--tw-space-y-reverse: 0; margin-top: calc(10rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(10rem * var(--tw-space-y-reverse));
space-y-44 > * + *--tw-space-y-reverse: 0; margin-top: calc(11rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(11rem * var(--tw-space-y-reverse));
space-y-48 > * + *--tw-space-y-reverse: 0; margin-top: calc(12rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(12rem * var(--tw-space-y-reverse));
space-y-52 > * + *--tw-space-y-reverse: 0; margin-top: calc(13rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(13rem * var(--tw-space-y-reverse));
space-y-56 > * + *--tw-space-y-reverse: 0; margin-top: calc(14rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(14rem * var(--tw-space-y-reverse));
space-y-60 > * + *--tw-space-y-reverse: 0; margin-top: calc(15rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(15rem * var(--tw-space-y-reverse));
space-y-64 > * + *--tw-space-y-reverse: 0; margin-top: calc(16rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(16rem * var(--tw-space-y-reverse));
space-y-72 > * + *--tw-space-y-reverse: 0; margin-top: calc(18rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(18rem * var(--tw-space-y-reverse));
space-y-80 > * + *--tw-space-y-reverse: 0; margin-top: calc(20rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(20rem * var(--tw-space-y-reverse));
space-y-96 > * + *--tw-space-y-reverse: 0; margin-top: calc(24rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(24rem * var(--tw-space-y-reverse));
space-y-px > * + *--tw-space-y-reverse: 0; margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1px * var(--tw-space-y-reverse));
space-y-reverse > * + *--tw-space-y-reverse: 1;
-space-y-0 > * + *--tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse));
-space-y-0.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.125rem * var(--tw-space-y-reverse));
-space-y-1 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.25rem * var(--tw-space-y-reverse));
-space-y-1.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.375rem * var(--tw-space-y-reverse));
-space-y-2 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse));
-space-y-2.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.625rem * var(--tw-space-y-reverse));
-space-y-3 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.75rem * var(--tw-space-y-reverse));
-space-y-3.5 > * + *--tw-space-y-reverse: 0; margin-top: calc(-0.875rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.875rem * var(--tw-space-y-reverse));
-space-y-4 > * + *--tw-space-y-reverse: 0; margin-top: calc(-1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1rem * var(--tw-space-y-reverse));
-space-y-5 > * + *--tw-space-y-reverse: 0; margin-top: calc(-1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.25rem * var(--tw-space-y-reverse));
-space-y-6 > * + *--tw-space-y-reverse: 0; margin-top: calc(-1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.5rem * var(--tw-space-y-reverse));
-space-y-7 > * + *--tw-space-y-reverse: 0; margin-top: calc(-1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.75rem * var(--tw-space-y-reverse));
-space-y-8 > * + *--tw-space-y-reverse: 0; margin-top: calc(-2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2rem * var(--tw-space-y-reverse));
-space-y-9 > * + *--tw-space-y-reverse: 0; margin-top: calc(-2.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.25rem * var(--tw-space-y-reverse));
-space-y-10 > * + *--tw-space-y-reverse: 0; margin-top: calc(-2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.5rem * var(--tw-space-y-reverse));
-space-y-11 > * + *--tw-space-y-reverse: 0; margin-top: calc(-2.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.75rem * var(--tw-space-y-reverse));
-space-y-12 > * + *--tw-space-y-reverse: 0; margin-top: calc(-3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3rem * var(--tw-space-y-reverse));
-space-y-14 > * + *--tw-space-y-reverse: 0; margin-top: calc(-3.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3.5rem * var(--tw-space-y-reverse));
-space-y-16 > * + *--tw-space-y-reverse: 0; margin-top: calc(-4rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-4rem * var(--tw-space-y-reverse));
-space-y-20 > * + *--tw-space-y-reverse: 0; margin-top: calc(-5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-5rem * var(--tw-space-y-reverse));
-space-y-24 > * + *--tw-space-y-reverse: 0; margin-top: calc(-6rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-6rem * var(--tw-space-y-reverse));
-space-y-28 > * + *--tw-space-y-reverse: 0; margin-top: calc(-7rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-7rem * var(--tw-space-y-reverse));
-space-y-32 > * + *--tw-space-y-reverse: 0; margin-top: calc(-8rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-8rem * var(--tw-space-y-reverse));
-space-y-36 > * + *--tw-space-y-reverse: 0; margin-top: calc(-9rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-9rem * var(--tw-space-y-reverse));
-space-y-40 > * + *--tw-space-y-reverse: 0; margin-top: calc(-10rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-10rem * var(--tw-space-y-reverse));
-space-y-44 > * + *--tw-space-y-reverse: 0; margin-top: calc(-11rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-11rem * var(--tw-space-y-reverse));
-space-y-48 > * + *--tw-space-y-reverse: 0; margin-top: calc(-12rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-12rem * var(--tw-space-y-reverse));
-space-y-52 > * + *--tw-space-y-reverse: 0; margin-top: calc(-13rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-13rem * var(--tw-space-y-reverse));
-space-y-56 > * + *--tw-space-y-reverse: 0; margin-top: calc(-14rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-14rem * var(--tw-space-y-reverse));
-space-y-60 > * + *--tw-space-y-reverse: 0; margin-top: calc(-15rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-15rem * var(--tw-space-y-reverse));
-space-y-64 > * + *--tw-space-y-reverse: 0; margin-top: calc(-16rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-16rem * var(--tw-space-y-reverse));
-space-y-72 > * + *--tw-space-y-reverse: 0; margin-top: calc(-18rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-18rem * var(--tw-space-y-reverse));
-space-y-80 > * + *--tw-space-y-reverse: 0; margin-top: calc(-20rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-20rem * var(--tw-space-y-reverse));
-space-y-96 > * + *--tw-space-y-reverse: 0; margin-top: calc(-24rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-24rem * var(--tw-space-y-reverse));
-space-y-px > * + *--tw-space-y-reverse: 0; margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1px * var(--tw-space-y-reverse));

增添子元素的水平間距

space-x-{amount} 功能來控制子元素之間水平方向的距離。

1
2
3
<div class="flex space-x-4 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

增添子元素的垂直間距

space-y-{amount} 功能來控制子元素之間垂直方向的距離。

1
2
3
<div class="space-y-6 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

相反順序的子元素

如果你的元素順序反轉了 (使用 flex-row-reverseflex-col-reverse),請使用 space-x-reversespace-y-reverse 功能來確保每個元素的間距都被增加在正確的方向。

1
2
3
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

限制

這個功能只是一個在「除了第一個之外的所有項目」群組內增加外距的捷徑,它並非是設計來處理包裝過的排版,像是網格 (grids)、「子元素以非 DOM 自然排列的自定義複雜順序呈現」等複雜案例。

如果是那些情況,可以的話最好是使用間隙功能,或為每一個元素增加外距,並在父元素中增加匹配好的負外距:

<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>

Cannot be paired with divide utilities

The space-* utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.


響應式

如要讓子元素的間距有響應式效果,可在現有元素間距功能前加上前綴詞 {screen}:。例如:使用 md:space-x-8 可以在中型或以上的螢幕尺寸套用 space-x-8 的功能。

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。


客製化

元素間距的尺寸

如果你想把自訂的數值一次設定在 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.space 區段裡自訂。

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

更多有關自訂預設主題的資訊,可參考 theme customization documentation

變化模式

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

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

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

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

停用

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

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