Divide width
Set solid border widths on later visible siblings along an axis.
Draw a solid border on each later visible direct child to separate grouped items.
Quick reference
| Example class | Expected declarations |
|---|---|
divide-x-3 | border-left-width: 3px; border-left-style: solid; |
divide-y-2 | border-top-width: 2px; border-top-style: solid; |
Example setup
The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.
Examples in use
Separate stacked children
divide-y-2 places a 2px top border on later visible children. The hidden child remains in the source but is skipped by the divider selector.
<ul class="wind-demo-vertical-list divide-y-2"><li class="wind-demo-item">Visible item A</li><li class="wind-demo-item" hidden>Hidden child in the source</li><li class="wind-demo-item">Visible item B</li><li class="wind-demo-item">Visible item C</li></ul>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-vertical-list {
max-width: 27rem;
margin: 0;
padding: 0;
list-style: none;
color: #16324f;
font: 14px / 1.5 system-ui, sans-serif;
}
.wind-demo-item {
padding: .7rem .2rem;
}
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
border-top-width: 2px;
border-top-style: solid;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-item": true,
"wind-demo-vertical-list": true
},
"safelist": {
"docs-preview": [
"divide-y-2"
]
}
}
}Authored demonstration CSS
.wind-demo-vertical-list { max-width: 27rem; margin: 0; padding: 0; list-style: none; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-item { padding: 0.7rem 0.2rem; }Separate children in a row
divide-x-3 places a 3px left border on each later visible direct child; the first child has no divider.
<div class="wind-demo-horizontal divide-x-3"><div class="wind-demo-item">First</div><div class="wind-demo-item">Second</div><div class="wind-demo-item">Third</div></div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-horizontal {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 30rem;
color: #16324f;
font: 14px / 1.5 system-ui, sans-serif;
}
.wind-demo-item {
padding: .7rem .8rem;
}
.divide-x-3 > :not([hidden]) ~ :not([hidden]) {
border-left-width: 3px;
border-left-style: solid;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-horizontal": true,
"wind-demo-item": true
},
"safelist": {
"docs-preview": [
"divide-x-3"
]
}
}
}Authored demonstration CSS
.wind-demo-horizontal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; color: #16324f; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-item { padding: 0.7rem 0.8rem; }Custom and named values
divide-y adds a top border to later visible direct siblings; divide-x adds a left border. Both use physical sides, have a bare 1px form, accept integer pixel widths and validated bracket lengths, and set the relevant border style to solid. The first visible child receives no divider. Elements with a hidden attribute are excluded even if they occur between visible children; display:none without hidden is still a selector participant. There are no reverse flags.
Related guides: Utility grammar · Variants
Catalog details
divide-x
| Field | Value |
|---|---|
| Catalog identifier | v1.divide.width.x |
| Class pattern | divide-x or divide-x-<suffix> |
| Grammar | {"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-left-width","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | divide-width (28) |
| Order rank | 0 |
| Selector shape | laterVisibleSiblings |
| Spec version | 1 |
| Emitter properties | border-left-width, border-left-style |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "1px" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
border-left-width | resolved | null |
border-left-style | fixed | "solid" |
Catalog examples
| Example class | Expected declarations |
|---|---|
divide-x | border-left-width: 1px; border-left-style: solid |
divide-y
| Field | Value |
|---|---|
| Catalog identifier | v1.divide.width.y |
| Class pattern | divide-y or divide-y-<suffix> |
| Grammar | {"acceptedKinds":["exact","integer","arbitrary"],"arbitraryProperty":"border-top-width","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | divide-width (28) |
| Order rank | 0 |
| Selector shape | laterVisibleSiblings |
| Spec version | 1 |
| Emitter properties | border-top-width, border-top-style |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
exact | null | "1px" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
border-top-width | resolved | null |
border-top-style | fixed | "solid" |
Catalog examples
| Example class | Expected declarations |
|---|---|
divide-y | border-top-width: 1px; border-top-style: solid |