Mini preset

Det grundläggande preset för UnoCSS, med endast de mest väsentliga verktygen.

Källkod

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(),
    // ...andra presets
  ],
})

TIP

Denna preset ingår i unocss-paketet, du kan också importera den därifrån:

import { presetMini } from 'unocss'

Regler

Denna preset är en delmängd av @unocss/preset-wind3, som endast innehåller de mest väsentliga verktygen anpassade efter CSS:s egenskaper, men exkluderar åsiktsfyllda eller komplicerade verktyg som introducerats i Tailwind CSS (container, animation, gradient etc.). Detta kan vara en bra utgångspunkt för din egen anpassade preset ovanpå bekanta verktyg från Tailwind CSS eller Windi CSS.

Funktioner

Mörkt läge

Som standard genererar denna preset klassbaserat mörkt läge med dark:-variant.

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

kommer att generera:

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

Mediafrågebaserat mörkt läge

För att istället använda mediafrågebaserat mörkt läge globalt kan du ändra konfigurationen för dark:-varianten:

presetMini({
  dark: 'media'
})

Nu kommer

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

att generera:

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

CSS @layer

CSS:s inbyggda @layer stöds med varianten layer-xx:

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

kommer att generera:

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

Tema

Du kan helt anpassa din temaegenskap i din konfiguration, och UnoCSS kommer så småningom att djupt sammanfoga den med standardtemat.

WARNING

breakpoints-egenskapen är inte djupt sammanslagen, utan åsidosatt, se Breakpoints.

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

Alternativ

dark

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

Alternativen för mörkt läge. Det kan vara antingen class, media, eller ett anpassat selektorobjekt (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Selektor för ljus variant.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selektor för mörk variant.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Typ: Boolean
• Standard: false

Generera pseudoselektor som [group=""] istället för .group.

variablePrefix

• Typ: string
• Standard: un-

Prefix för CSS-anpassade egenskaper.

prefix

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

Verktygsprefix.

preflight

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

Generera preflight-css. Det kan vara:

• true: generera alltid preflight.
• false: ingen preflight.
• on-demand: generera endast preflight för använda verktyg.