@unocss/preset-mini

The minimal preset for UnoCSS.

Installation

npm i -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'

Unocss({
  presets: [
    presetMini(),
  ],
})

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: rgba(248, 113, 113, 0.1);
}

To opt-in media query based dark mode, you can use @dark: variant:

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

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

Or set globally with the config for dark: variant

presetMini({
  dark: 'media'
})

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;
  }
}