Ρυθμίστε Windi CSS

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

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

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

<div class="grid pt-4 gap-4 grids-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] dark: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