Ρυθμίστε το Windi CSS

Περιβάλλον: node

Αυτή η λειτουργία ρύθμισης θα εκτελεστεί μόνο σε περιβάλλον Node.js, μπορείτε να έχετε πρόσβαση στο API του Node.

WARNING

Από την έκδοση v0.47.0, δεν υποστηρίζουμε πλέον το Windi CSS. Παρακαλούμε μεταβείτε στο UnoCSS.

Το markdown υποστηρίζει εκ φύσεως ενσωματωμένες επισημάνσεις HTML. Επομένως, μπορείτε να διαμορφώσετε το περιεχόμενό σας με τον τρόπο που θέλετε.

Για παράδειγμα:

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

### Όνομα

- Στοιχείο 1
- Στοιχείο 2

</div>

Η Λειτουργία Attributify του Windi CSS v3.0 είναι ενεργοποιημένη από προεπιλογή.

Ρυθμίσεις

Για να ρυθμίσετε το Windi CSS, δημιουργήστε setup/windicss.ts με το εξής περιεχόμενο για να επεκτείνετε τις ενσωματωμένες ρυθμίσεις

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// επεκτείνοντας τις ενσωματωμένες ρυθμίσεις του windicss
export default defineWindiSetup(() => ({
  shortcuts: {
    // ρυθμίστε το προεπιλεγμένο φόντο
    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
  },
  theme: {
    extend: {
      // οι γραμματοσειρές μπορούν να αντικατασταθούν εδώ, θυμηθείτε να ενημερώσετε τους συνδέσμους των γραμματοσειρών στο `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',
      },
    },
  },
}))

Μάθετε περισσότερα για τις ρυθμίσεις Windi CSS