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.47.0, we no longer support Windi CSS. Please migrate to UnoCSS.

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] 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