border-collapse merges cell borders; border-separate + border-spacing-* spaces them. This family contains 107 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
border-collapseborder-collapse: collapse;
border-separateborder-collapse: separate;
border-spacing-0--tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-1--tw-border-spacing-x: 0.25rem; --tw-border-spacing-y: 0.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-2--tw-border-spacing-x: 0.5rem; --tw-border-spacing-y: 0.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-3--tw-border-spacing-x: 0.75rem; --tw-border-spacing-y: 0.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-4--tw-border-spacing-x: 1rem; --tw-border-spacing-y: 1rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-5--tw-border-spacing-x: 1.25rem; --tw-border-spacing-y: 1.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-6--tw-border-spacing-x: 1.5rem; --tw-border-spacing-y: 1.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-7--tw-border-spacing-x: 1.75rem; --tw-border-spacing-y: 1.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-8--tw-border-spacing-x: 2rem; --tw-border-spacing-y: 2rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-9--tw-border-spacing-x: 2.25rem; --tw-border-spacing-y: 2.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-10--tw-border-spacing-x: 2.5rem; --tw-border-spacing-y: 2.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-11--tw-border-spacing-x: 2.75rem; --tw-border-spacing-y: 2.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-12--tw-border-spacing-x: 3rem; --tw-border-spacing-y: 3rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-14--tw-border-spacing-x: 3.5rem; --tw-border-spacing-y: 3.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-16--tw-border-spacing-x: 4rem; --tw-border-spacing-y: 4rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-20--tw-border-spacing-x: 5rem; --tw-border-spacing-y: 5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-24--tw-border-spacing-x: 6rem; --tw-border-spacing-y: 6rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-28--tw-border-spacing-x: 7rem; --tw-border-spacing-y: 7rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-32--tw-border-spacing-x: 8rem; --tw-border-spacing-y: 8rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-36--tw-border-spacing-x: 9rem; --tw-border-spacing-y: 9rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-40--tw-border-spacing-x: 10rem; --tw-border-spacing-y: 10rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-44--tw-border-spacing-x: 11rem; --tw-border-spacing-y: 11rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-48--tw-border-spacing-x: 12rem; --tw-border-spacing-y: 12rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-52--tw-border-spacing-x: 13rem; --tw-border-spacing-y: 13rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-56--tw-border-spacing-x: 14rem; --tw-border-spacing-y: 14rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-60--tw-border-spacing-x: 15rem; --tw-border-spacing-y: 15rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-64--tw-border-spacing-x: 16rem; --tw-border-spacing-y: 16rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-72--tw-border-spacing-x: 18rem; --tw-border-spacing-y: 18rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-80--tw-border-spacing-x: 20rem; --tw-border-spacing-y: 20rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-96--tw-border-spacing-x: 24rem; --tw-border-spacing-y: 24rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-px--tw-border-spacing-x: 1px; --tw-border-spacing-y: 1px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-0.5--tw-border-spacing-x: 0.125rem; --tw-border-spacing-y: 0.125rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-1.5--tw-border-spacing-x: 0.375rem; --tw-border-spacing-y: 0.375rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-2.5--tw-border-spacing-x: 0.625rem; --tw-border-spacing-y: 0.625rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-3.5--tw-border-spacing-x: 0.875rem; --tw-border-spacing-y: 0.875rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-0--tw-border-spacing-x: 0px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-1--tw-border-spacing-x: 0.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-2--tw-border-spacing-x: 0.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-3--tw-border-spacing-x: 0.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-4--tw-border-spacing-x: 1rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-5--tw-border-spacing-x: 1.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-6--tw-border-spacing-x: 1.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-7--tw-border-spacing-x: 1.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-8--tw-border-spacing-x: 2rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-9--tw-border-spacing-x: 2.25rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-10--tw-border-spacing-x: 2.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-11--tw-border-spacing-x: 2.75rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-12--tw-border-spacing-x: 3rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-14--tw-border-spacing-x: 3.5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-16--tw-border-spacing-x: 4rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-20--tw-border-spacing-x: 5rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-24--tw-border-spacing-x: 6rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-28--tw-border-spacing-x: 7rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-32--tw-border-spacing-x: 8rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-36--tw-border-spacing-x: 9rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-40--tw-border-spacing-x: 10rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-44--tw-border-spacing-x: 11rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
border-spacing-x-48--tw-border-spacing-x: 12rem; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);

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

Example#

example
html
<table class="border-separate border-spacing-2">…</table>

Responsive & variants#

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

utilities/tables/table-layout|Table layout