Windi CSSRing
Ring Width
Utilities for creating outline rings with box-shadows.
default
inset
0
1
2
4
6
8
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
ringWidth: {
DEFAULT: '2px',
6: '6px',
10: '10px',
},
},
},
}
Ring Color
Utilities for setting the color of outline rings.
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
const colors = require('windicss/colors')
export default {
theme: {
ringColor: {
white: colors.white,
pink: colors.fuchsia,
},
},
}
Ring Opacity
Utilities for setting the opacity of outline rings.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
ringOpacity: {
15: '0.15',
35: '0.35',
65: '0.65',
},
},
},
}
Ring Offset Width
Utilities for simulating an offset when adding outline rings.
0
1
2
4
6
8
10
12
14
16
20
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
ringOffsetWidth: {
3: '3px',
6: '6px',
10: '10px',
},
},
},
}
Ring Offset Color
Utilities for setting the color of outline ring offsets.
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
const colors = require('windicss/colors')
export default {
theme: {
ringOffsetColor: {
white: colors.white,
pink: colors.fuchsia,
},
},
}