Preset Mini

Il preset base per UnoCSS, con solo le utility più essenziali.

Codice Sorgente

Installazione

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(),
    // ...altri preset
  ],
})

TIP

Questo preset è incluso nel pacchetto unocss, puoi anche importarlo da lì:

import { presetMini } from 'unocss'

Regole

Questo preset è un sottoinsieme di @unocss/preset-wind3, contenente solo le utility più essenziali allineate con le proprietà CSS, ma esclude utility opinabili o complicate introdotte in Tailwind CSS (container, animation, gradient ecc.). Questo può essere un buon punto di partenza per il tuo preset personalizzato basato su utility familiari da Tailwind CSS o Windi CSS.

Funzionalità

Modalità scura

Per impostazione predefinita, questo preset genera la modalità scura basata su classe con la variante dark:.

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

genererà:

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

Modalità scura basata su media query

Per usare invece la modalità scura basata su media query globalmente puoi cambiare la configurazione per la variante dark::

presetMini({
  dark: 'media'
})

Ora

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

genererà:

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

CSS @layer

Il @layer nativo di CSS è supportato con la variante layer-xx:

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

genererà:

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

Tema

Puoi personalizzare completamente la proprietà del tema nella tua configurazione, e UnoCSS la unirà in profondità al tema predefinito.

WARNING

La proprietà breakpoints non viene unita in profondità, ma sovrascritta, vedi Breakpoints.

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

Opzioni

dark

• Tipo: class | media | DarkModeSelectors
• Predefinito: class

Le opzioni della modalità scura. Può essere class, media, o un oggetto selettore personalizzato (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Selettore per la variante chiara.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selettore per la variante scura.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Tipo: Boolean
• Predefinito: false

Genera il selettore pseudo come [group=""] invece di .group.

variablePrefix

• Tipo: string
• Predefinito: un-

Prefisso per le proprietà CSS personalizzate.

prefix

• Tipo: string | string[]
• Predefinito: undefined

Prefisso per le utility.

preflight

• Tipo: boolean | on-demand
• Predefinito: true

Genera CSS preflight. Può essere:

• true: genera sempre preflight.
• false: nessun preflight.
• on-demand: genera preflight solo per le utility usate.