Utilities for controlling the space between child elements.
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-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-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-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-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-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.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.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.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-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-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-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-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-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-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.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.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.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-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-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-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-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-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-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.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.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.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-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-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-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-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-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-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.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.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.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))); |
Control the horizontal space between elements using the space-x-{amount}
utilities.
<div class="flex space-x-4 ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Control the vertical space between elements using the space-y-{amount}
utilities.
<div class="flex space-y-6 ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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.
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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.
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.
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'],
}
}
}
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,
}
}