Tailwind CSS on GitHub

Space Between

Utilities for controlling the space between child elements.

Default class reference

Class
Properties
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-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-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-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)));

Add horizontal space between children

Control the horizontal space between elements using the space-x-{amount} utilities.

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

Add vertical space between children

Control the vertical space between elements using the space-y-{amount} utilities.

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

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

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>

Responsive

To control the space between elements at a specific breakpoint, add a {screen}: prefix to any existing space utility. For example, adding the class md:space-x-8 to an element would apply the space-x-8 utility at medium screen sizes and above.

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

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.


Customizing

Spacing scale

If you'd like to customize your values for space between, padding, margin, width, and height all at once, use the theme.spacing section of your tailwind.config.js file.

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

To customize only the space between values, use the theme.space section of your tailwind.config.js file.

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

Learn more about customizing the default theme in the theme customization documentation.

Variants

By default, only responsive variants are generated for space utilities.

You can control which variants are generated for the space utilities by modifying the space property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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

Disabling

If you don't plan to use the space utilities in your project, you can disable them entirely by setting the space property to false in the corePlugins section of your config file:

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