Preset Mini

Podstawowy preset dla UnoCSS, z tylko najbardziej niezbędnymi narzędziami.

Kod Źródłowy

Instalacja

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

TIP

Ten preset jest zawarty w pakiecie unocss, możesz go również stamtąd zaimportować:

import { presetMini } from 'unocss'

Reguły

Ten preset jest podzbiorem @unocss/preset-wind3, zawierającym tylko najbardziej niezbędne narzędzia zgodne z właściwościami CSS, ale wyklucza narzędzia narzucające lub skomplikowane wprowadzone w Tailwind CSS (container, animation, gradient itp.). To może być dobry punkt wyjścia dla własnego niestandardowego preseta opartego na znajomych narzędziach z Tailwind CSS lub Windi CSS.

Features

Dark mode

By default, this preset generates class-based dark mode with dark: variant.

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

will generate:

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

Media query based dark mode

To instead use media query based dark mode globally you can change the config for the dark: variant:

presetMini({
  dark: 'media'
})

Now

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

will generate:

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

CSS @layer

CSS's native @layer is supported with variant layer-xx:

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

will generate:

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

Theme

You can fully customize your theme property in your config, and UnoCSS will eventually deeply merge it to the default theme.

WARNING

breakpoints property isn't deeply merged, but overridden, see Breakpoints.

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

Options

dark

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

The dark mode options. It can be either class, media, or a custom selector object(DarkModeSelectors).

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

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

attributifyPseudo

• Type: Boolean
• Default: false

Generate pseudo selector as [group=""] instead of .group.

variablePrefix

• Type: string
• Default: un-

Prefix for CSS custom properties.

prefix

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

Utils prefix.

preflight

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

Generate preflight css. It can be:

• true: always generate preflight.
• false: no preflight.
• on-demand: only generate preflight for used utilities.