Kolibry

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