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