Windi CSSDivider
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