Configure Windi CSS
Environment: node
This setup function will only run on Node.js environment, you can have access to Node's API.
WARNING
Since Slidev v0.42.0, UnoCSS become the default CSS framework for Slidev.
You can still use Windi CSS by setting css: windicss
in the frontmatter.
---
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 '@slidev/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