Konfiguriere Windi CSS

Umgebung: node

Diese Konfigurationsfunktion läuft nur in einer Node.js Umgebung, man hat zugriff auf Node's API.

Markdown unterstützt eingebettete HTML-Markups. So können Inhalte nach Belieben gestylt werden. Der Einfachheit halber haben wir Windi CSS integriert, sodass dieses Markup direkt mit utility-Klassen gestylt werden kann.

Zum Beispiel:

<div class="grid pt-4 gap-4 grids-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

Der Attributify-Modus in Windi CSS v3.0 ist standardmäßig aktiviert.

Konfigurationen

Erstelle eine ./setup/windicss.ts Datei mit dem folgendem Inhalt, um Windi CSS zu konfigurieren:

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// Erweiterung der eingebauten Windicss-Konfigurationen
export default defineWindiSetup(() => ({
  shortcuts: {
    // eigener Standardhintergrund
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
  theme: {
    extend: {
      // Schriftarten können hier ersetzt werden, Web-Font-Links müssen der `index.html` Datei hinzugefügt werden.
      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',
      },
    },
  },
}))

Erfahre mehr über Windi CSS Konfigurationen

# Konfiguriere Windi CSS

# Konfigurationen

Konfiguriere Windi CSS

Konfigurationen