Mini prednastavitev

Osnovna prednastavitev za UnoCSS, le z najbolj bistvenimi pripomočki.

Izvorna koda

Namestitev

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(),
    // ...druge prednastavitve
  ],
})

TIP

Ta prednastavitev je vključena v paket unocss, lahko jo tudi uvozite od tam:

import { presetMini } from 'unocss'

Pravila

Ta prednastavitev je podmnožica @unocss/preset-wind3, ki vsebuje le najbolj bistvene pripomočke, usklajene s CSS lastnostmi, vendar izključuje mnenjske ali zapletene pripomočke, uvedene v Tailwind CSS (container, animation, gradient itd.). To je lahko dobra izhodiščna točka za vašo lastno prilagojeno prednastavitev na vrhu znanih pripomočkov iz Tailwind CSS ali Windi CSS.

Funkcije

Temni način

Privzeto ta prednastavitev generira temni način na osnovi razreda z varianto dark:.

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

bo generiralo:

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

Temni način na osnovi medijske poizvedbe

Če želite namesto tega uporabiti temni način na osnovi medijske poizvedbe globalno, lahko spremenite konfiguracijo za varianto dark::

presetMini({
  dark: 'media'
})

Zdaj

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

bo generiralo:

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

CSS @layer

Nativni CSS @layer je podprt z varianto layer-xx:

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

bo generiralo:

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

Tema

V vaši konfiguraciji lahko popolnoma prilagodite lastnost teme, UnoCSS pa jo bo sčasoma globoko združil s privzeto temo.

WARNING

Lastnost breakpoints ni globoko združena, ampak prepisana, glejte Prelomne točke.

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

Možnosti

dark

• Tip: class | media | DarkModeSelectors
• Privzeto: class

Možnosti temnega načina. Lahko je class, media ali predmet z izbirnim selektorjem (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Selektor za svetlo varianto.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selektor za temno varianto.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Tip: Boolean
• Privzeto: false

Generiraj psevdo selektor kot [group=""] namesto .group.

variablePrefix

• Tip: string
• Privzeto: un-

Predpona za CSS custom properties.

prefix

• Tip: string | string[]
• Privzeto: undefined

Predpona pripomočkov.

preflight

• Tip: boolean | on-demand
• Privzeto: true

Generiraj preflight css. Lahko je:

• true: vedno generiraj preflight.
• false: brez preflight.
• on-demand: generiraj preflight le za uporabljene pripomočke.