Mini preset

Základný preset pre UnoCSS, iba s najdôležitejšími utilítami.

Zdrojový kód

Inštalácia

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(),
    // ...ostatné presety
  ],
})

TIP

Tento preset je zahrnutý v balíku unocss, môžete ho tiež importovať odtiaľ:

import { presetMini } from 'unocss'

Pravidlá

Tento preset je podmnožinou @unocss/preset-wind3, obsahuje iba najdôležitejšie utility zarovnané s vlastnosťami CSS, ale nezahŕňa opinionované alebo komplikované utility zavedené v Tailwind CSS (container, animation, gradient atď.). Toto môže byť dobrý východiskový bod pre váš vlastný custom preset na základe známych utilít z Tailwind CSS alebo Windi CSS.

Funkcie

Dark mode

Predvolene tento preset generuje class-based dark mode s variantom dark:.

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

vygeneruje:

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

Dark mode založený na media query

Na použitie dark mode založeného na media query globálne môžete zmeniť konfiguráciu pre variant dark::

presetMini({
  dark: 'media'
})

Teraz

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

vygeneruje:

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

CSS @layer

CSS natívny @layer je podporovaný s variantom layer-xx:

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

vygeneruje:

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

Téma

Môžete plne prispôsobiť vlastnosť témy vo vašej konfigurácii a UnoCSS ju nakoniec hlboko zlúči s predvolenou témou.

WARNING

Vlastnosť breakpoints nie je hlboko zlúčená, ale prepísaná, pozrite Breakpoints.

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

Možnosti

dark

• Type: class | media | DarkModeSelectors
• Default: class

Možnosti dark mode. Môže to byť buď class, media, alebo vlastný selector objekt (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Selector pre light variant.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selector pre dark variant.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Type: Boolean
• Default: false

Generovať pseudo selector ako [group=""] namiesto .group.

variablePrefix

• Type: string
• Default: un-

Prefix pre CSS custom properties.

prefix

• Type: string | string[]
• Default: undefined

Prefix utilít.

preflight

• Type: boolean | on-demand
• Default: true

Generovať preflight css. Môže to byť:

• true: vždy generovať preflight.
• false: žiadny preflight.
• on-demand: generovať preflight iba pre použité utility.