Divider

Divider Width

Utilities for controlling the border width between elements.

Divide Y

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS

Divide X

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
Customizing

The divide width scale inherits its values from the borderWidth scale by default, so if you'd like to customize your values for both border width and divide width together, use the theme.borderWidth section of your windi.config.js file.

windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

To customize only the divide width values, use the theme.divideWidth section of your windi.config.js file.

windi.config.js
export default {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Divider Color

Utilities for controlling the border color between elements.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Customizing
windi.config.js
export default {
  theme: {
    divideColor: theme => ({
      ...theme('borderColors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Divider Opacity

Utilities for controlling the opacity borders between elements.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      divideOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Divider Style

Utilities for controlling the border style between elements.

solid
dashed
dotted
double
none
CSS