Divide Color

Utilities for controlling the border color between elements.

Usage

Control the border color between elements using the divideColor={color} utility.

<x.div divideX divideColor="fuchsia-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Changing opacity

Use color alpha variants to choose another opacity.

<x.div divideX divideColor="light-blue-500-a50">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

To control the border color between elements at a specific breakpoint, use responsive object notation. For example, adding the property divideColor={{ md: "red-500" }} to an element would apply the divideColor="red-500" utility at medium screen sizes and above.

<x.div divideColor={{ md: 'red-500' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.