Windi CSSCreate Your Plugin
You can easily create a plugin through the interface of windicss. Windicss is built based on TypeScript, so we highly recommend that you use Typescript to build plugins, it will give you good type support and completion tips, of course, if you want to use JavaScript, it is also supported.
Add Static Utilities
Basic Usage
plugin(({ addUtilities }) => {
addUtilities({
'.aspect-none': {
'position': 'static',
'paddingBottom': '0',
'> *': {
position: 'static',
height: 'auto',
width: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
},
},
})
})
Add Dynamic Utilities
Basic Usage
addDynamic('filter', ({ Utility, Style }) => {
return Utility.handler
.handleStatic(Style('filter'))
.createProperty(['-webkit-filter', 'filter'])
})
Add Components
plugin(({ addComponents }) => {
addComponents({
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
},
'.btn-blue': {
'backgroundColor': '#3490dc',
'color': '#fff',
'&:hover': {
backgroundColor: '#2779bd',
},
},
})
})
Add Variants
Modify Selectors
plugin(addVariant('pointer-group-hover', ({ modifySelectors }) => {
return modifySelectors(({ className }) => {
return `.no-touch .group:hover .${className}`
})
}))
Add Base Styles
plugin(({ addBase, theme }) => {
addBase({
h1: { fontSize: theme('fontSize.2xl') },
h2: { fontSize: theme('fontSize.xl') },
h3: { fontSize: theme('fontSize.lg') },
})
})
Other Tools
CSS Escape
e()
Manual Prefix
prefix()
Get User Variants
variants()
Get User Theme
theme()
Get User Configuration
config()