space-x-* and space-y-* add margin BETWEEN siblings without touching their outer edges. This family contains 72 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
space-y-reverse--tw-space-y-reverse: 1;
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-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-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));

…and 12 more in this family — search by class name to find the exact one.

Example#

example
html
<div class="space-y-4">
  <p>One</p>
  <p>Two</p>
  <p>Three — 1rem between each</p>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • space-y-* is the stack primitive for vertical rhythm
  • In new code, gap often replaces space-between — compare in comparisons/gap-vs-space-between|Gap vs space-between

Common mistakes#

  • space-* fights with grid layout — use gap there

utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding