Mini preset

The basic preset for UnoCSS, with only the most essential utilities.

Source Code

Installation

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

uno.config.ts

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...other presets
  ],
})

TIP

This preset is included in the unocss package, you can also import it from there:

import { presetMini } from 'unocss'

Rules

This preset is a subset of @unocss/preset-wind, containing only the most essential utilities aligned with CSS's properties, but excludes opinioned or complicated utilities introduced in Tailwind CSS (container, animation, gradient etc.). This can be a good starting point for your own custom preset on top of familiar utilities from Tailwind CSS or 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.