Skip to content
TeaCSS documentation

Dividers

Rules and spacing between sibling elements. TeaCSS Standard reference.

This is the Standard reference for dividers. It follows the authored TeaCSS vocabulary at source revision fa3709a for package version 0.7.1. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference for more examples, and do not infer support from a different prefix.

divide-width

Interactive example. Rule type: composer. Prefixes: divide-x-width, divide-y-width, divide-inline-width, divide-block-width. Example: divide-x-width:0. It emits --T-divide-x-width:0px;border-right-width:var(--T-divide-x-width);border-right-style:var(--T-divide-style);border-right-color:var(--T-divide-color, currentColor);.

Documented values (10)

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

divide-style

Interactive example. Rule type: composer. Prefixes: divide-style, divide-inline-style, divide-block-style. Example: divide-style:solid. It emits --T-divide-style:solid;.

Documented values (10)

solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, none

divide-color

Interactive example. Rule type: composer. Prefixes: divide-color, divide-inline-color, divide-block-color. Example: divide-color:ink-100. It emits --T-divide-color:var(--color-ink-100);.

Documented values (476)

ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900, gray-950, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900, mauve-950, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900, slate-950, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900, sage-950, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900, olive-950, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900, purple-950, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900, violet-950, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900, iris-950, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900, indigo-950, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900, blue-950, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900, gold-950, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900, sky-950, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900, mint-950, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900, lime-950, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900, failure-950, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900, general-950, transparent, current, black, white, [#abc], $color, $color|white, red-500/50