Configure Windi CSS
Environment: node
This setup function will only run on Node.js environment, you can have access to Node's API.
You can still useUnoCSS
---
css: windicss
---
:::
Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want.
For example:
<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">
### Name
- Item 1
- Item 2
</div>
The Attributify Mode in Windi CSS v3.0 is enabled by default.
Configurations
To configure Windi CSS, create setup/windicss.ts
with the following content to extend the builtin configurations
// setup/windicss.ts
import { defineWindiSetup } from '@kolibry/types'
// extending the builtin windicss configurations
export default defineWindiSetup(() => ({
shortcuts: {
// custom the default background
'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
},
theme: {
extend: {
// fonts can be replaced here, remember to update the web font links in `index.html`
fontFamily: {
sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
mono: '"Fira Code", monospace',
},
},
},
}))
Learn more about Windi CSS configurations