Mini Preset

Das grundlegende Preset für UnoCSS, mit nur den wesentlichsten Utilities.

Quellcode

Installation

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...andere Presets
  ],
})

TIP

Dieses Preset ist im unocss Paket enthalten, Sie können es auch von dort importieren:

import { presetMini } from 'unocss'

Regeln

Dieses Preset ist eine Teilmenge von @unocss/preset-wind3, die nur die wesentlichsten Utilities enthält, die mit CSS-Eigenschaften ausgerichtet sind, aber voreingenommene oder komplizierte Utilities ausschließt, die in Tailwind CSS eingeführt wurden (container, animation, gradient usw.). Dies kann ein guter Ausgangspunkt für Ihr eigenes benutzerdefiniertes Preset auf Basis vertrauter Utilities aus Tailwind CSS oder Windi CSS sein.

Funktionen

Dark Mode

Standardmäßig generiert dieses Preset klassenbasierten Dark Mode mit der dark: Variante.

<div class="dark:bg-red:10" />

wird generieren:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

Media Query basierter Dark Mode

Um stattdessen Media Query basierten Dark Mode global zu verwenden, können Sie die Konfiguration für die dark: Variante ändern:

presetMini({
  dark: 'media'
})

Jetzt

<div class="dark:bg-red:10" />

wird generieren:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

CSS @layer

CSS's native @layer wird mit der Variante layer-xx: unterstützt

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

wird generieren:

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

Theme

Sie können Ihre Theme-Eigenschaft vollständig in Ihrer Konfiguration anpassen, und UnoCSS wird sie schließlich tief mit dem Standard-Theme zusammenführen.

WARNING

Die breakpoints Eigenschaft wird nicht tief zusammengeführt, sondern überschrieben, siehe Breakpoints.

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

Optionen

dark

• Typ: class | media | DarkModeSelectors
• Standard: class

Die Dark Mode Optionen. Es kann entweder class, media oder ein benutzerdefiniertes Selektor-Objekt (DarkModeSelectors) sein.

interface DarkModeSelectors {
  /**
   * Selektor für helle Variante.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selektor für dunkle Variante.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Typ: Boolean
• Standard: false

Generiert Pseudo-Selektor als [group=""] anstelle von .group.

variablePrefix

• Typ: string
• Standard: un-

Präfix für CSS Custom Properties.

prefix

• Typ: string | string[]
• Standard: undefined

Utils-Präfix.

preflight

• Typ: boolean | on-demand
• Standard: true

Generiert Preflight CSS. Es kann sein:

• true: generiert immer Preflight.
• false: kein Preflight.
• on-demand: generiert Preflight nur für verwendete Utilities.