Slidev

Configure Windi CSS

Environment: node
This setup function will only run on Node.js environment, you can have access to Node's API.

Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want. To provide some convenience, we have Windi CSS built-in, so you can style markup directly using class utilities.

For example:

<div class="grid pt-4 gap-4 grids-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