divide-x/y with widths, colors, styles and reverse — borders BETWEEN siblings. This family contains 285 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
divide-y-reverse--tw-divide-y-reverse: 1;
divide-x-reverse--tw-divide-x-reverse: 1;
divide-solidborder-style: solid;
divide-dashedborder-style: dashed;
divide-dottedborder-style: dotted;
divide-doubleborder-style: double;
divide-noneborder-style: none;
divide-x-0--tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-2--tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-4--tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-8--tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse)));
divide-x--tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
divide-y-0--tw-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
divide-y-2--tw-divide-y-reverse: 0; border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
divide-y-4--tw-divide-y-reverse: 0; border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
divide-y-8--tw-divide-y-reverse: 0; border-top-width: calc(8px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(8px * var(--tw-divide-y-reverse));
divide-y--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
divide-inheritborder-color: inherit;
divide-currentborder-color: currentColor;
divide-transparentborder-color: transparent;
divide-black--tw-divide-opacity: 1; border-color: rgb(0 0 0 / var(--tw-divide-opacity, 1));
divide-white--tw-divide-opacity: 1; border-color: rgb(255 255 255 / var(--tw-divide-opacity, 1));
divide-slate-50--tw-divide-opacity: 1; border-color: rgb(248 250 252 / var(--tw-divide-opacity, 1));
divide-slate-100--tw-divide-opacity: 1; border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
divide-slate-200--tw-divide-opacity: 1; border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
divide-slate-300--tw-divide-opacity: 1; border-color: rgb(203 213 225 / var(--tw-divide-opacity, 1));
divide-slate-400--tw-divide-opacity: 1; border-color: rgb(148 163 184 / var(--tw-divide-opacity, 1));
divide-slate-500--tw-divide-opacity: 1; border-color: rgb(100 116 139 / var(--tw-divide-opacity, 1));
divide-slate-600--tw-divide-opacity: 1; border-color: rgb(71 85 105 / var(--tw-divide-opacity, 1));
divide-slate-700--tw-divide-opacity: 1; border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
divide-slate-800--tw-divide-opacity: 1; border-color: rgb(30 41 59 / var(--tw-divide-opacity, 1));
divide-slate-900--tw-divide-opacity: 1; border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
divide-slate-950--tw-divide-opacity: 1; border-color: rgb(2 6 23 / var(--tw-divide-opacity, 1));
divide-gray-50--tw-divide-opacity: 1; border-color: rgb(249 250 251 / var(--tw-divide-opacity, 1));
divide-gray-100--tw-divide-opacity: 1; border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
divide-gray-200--tw-divide-opacity: 1; border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
divide-gray-300--tw-divide-opacity: 1; border-color: rgb(209 213 219 / var(--tw-divide-opacity, 1));
divide-gray-400--tw-divide-opacity: 1; border-color: rgb(156 163 175 / var(--tw-divide-opacity, 1));
divide-gray-500--tw-divide-opacity: 1; border-color: rgb(107 114 128 / var(--tw-divide-opacity, 1));
divide-gray-600--tw-divide-opacity: 1; border-color: rgb(75 85 99 / var(--tw-divide-opacity, 1));
divide-gray-700--tw-divide-opacity: 1; border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
divide-gray-800--tw-divide-opacity: 1; border-color: rgb(31 41 55 / var(--tw-divide-opacity, 1));
divide-gray-900--tw-divide-opacity: 1; border-color: rgb(17 24 39 / var(--tw-divide-opacity, 1));
divide-gray-950--tw-divide-opacity: 1; border-color: rgb(3 7 18 / var(--tw-divide-opacity, 1));
divide-zinc-50--tw-divide-opacity: 1; border-color: rgb(250 250 250 / var(--tw-divide-opacity, 1));
divide-zinc-100--tw-divide-opacity: 1; border-color: rgb(244 244 245 / var(--tw-divide-opacity, 1));
divide-zinc-200--tw-divide-opacity: 1; border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));
divide-zinc-300--tw-divide-opacity: 1; border-color: rgb(212 212 216 / var(--tw-divide-opacity, 1));
divide-zinc-400--tw-divide-opacity: 1; border-color: rgb(161 161 170 / var(--tw-divide-opacity, 1));
divide-zinc-500--tw-divide-opacity: 1; border-color: rgb(113 113 122 / var(--tw-divide-opacity, 1));
divide-zinc-600--tw-divide-opacity: 1; border-color: rgb(82 82 91 / var(--tw-divide-opacity, 1));
divide-zinc-700--tw-divide-opacity: 1; border-color: rgb(63 63 70 / var(--tw-divide-opacity, 1));
divide-zinc-800--tw-divide-opacity: 1; border-color: rgb(39 39 42 / var(--tw-divide-opacity, 1));
divide-zinc-900--tw-divide-opacity: 1; border-color: rgb(24 24 27 / var(--tw-divide-opacity, 1));
divide-zinc-950--tw-divide-opacity: 1; border-color: rgb(9 9 11 / var(--tw-divide-opacity, 1));
divide-neutral-50--tw-divide-opacity: 1; border-color: rgb(250 250 250 / var(--tw-divide-opacity, 1));
divide-neutral-100--tw-divide-opacity: 1; border-color: rgb(245 245 245 / var(--tw-divide-opacity, 1));
divide-neutral-200--tw-divide-opacity: 1; border-color: rgb(229 229 229 / var(--tw-divide-opacity, 1));
divide-neutral-300--tw-divide-opacity: 1; border-color: rgb(212 212 212 / var(--tw-divide-opacity, 1));
divide-neutral-400--tw-divide-opacity: 1; border-color: rgb(163 163 163 / var(--tw-divide-opacity, 1));

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

Example#

example
html
<ul class="divide-y divide-slate-200">
  <li class="py-3">Row</li>
</ul>

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.

Best practices#

  • divide-y = the table-less list pattern
  • divide-x for horizontal nav separation

Common mistakes#

  • divide-* on grid with gaps looks doubled — prefer borders on cells

utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline