border-<palette>-<shade> for every palette, with opacity modifiers. This family contains 329 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
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-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-x-0 | border-left-width: 0px; border-right-width: 0px; |
border-x-2 | border-left-width: 2px; border-right-width: 2px; |
border-x-4 | border-left-width: 4px; border-right-width: 4px; |
border-x-8 | border-left-width: 8px; border-right-width: 8px; |
border-y-0 | border-top-width: 0px; border-bottom-width: 0px; |
border-y-2 | border-top-width: 2px; border-bottom-width: 2px; |
border-y-4 | border-top-width: 4px; border-bottom-width: 4px; |
border-y-8 | border-top-width: 8px; border-bottom-width: 8px; |
border-s-0 | border-inline-start-width: 0px; |
border-s-2 | border-inline-start-width: 2px; |
border-s-4 | border-inline-start-width: 4px; |
border-s-8 | border-inline-start-width: 8px; |
border-e-0 | border-inline-end-width: 0px; |
border-e-2 | border-inline-end-width: 2px; |
border-e-4 | border-inline-end-width: 4px; |
border-e-8 | border-inline-end-width: 8px; |
border-t-0 | border-top-width: 0px; |
border-t-2 | border-top-width: 2px; |
border-t-4 | border-top-width: 4px; |
border-t-8 | border-top-width: 8px; |
border-r-0 | border-right-width: 0px; |
border-r-2 | border-right-width: 2px; |
border-r-4 | border-right-width: 4px; |
border-r-8 | border-right-width: 8px; |
border-b-0 | border-bottom-width: 0px; |
border-b-2 | border-bottom-width: 2px; |
…and 269 more in this family — search by class name to find the exact one.
Example#
example
<div class="border border-slate-200 dark:border-slate-700 rounded-lg">Adaptive border</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#
- Dark borders: dark:border-slate-700 pattern
- Subtle: *-200 light / *-800 dark
Related#
utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline