Logo Windi CSS

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