Skip to content
On this page

Mini preset

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

Source Code

Installation

bash
pnpm add -D @unocss/preset-mini
pnpm add -D @unocss/preset-mini
bash
yarn add -D @unocss/preset-mini
yarn add -D @unocss/preset-mini
bash
npm install -D @unocss/preset-mini
npm install -D @unocss/preset-mini
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetMini from '@unocss/preset-mini'

export default defineConfig({
  presets: [
    presetMini(),
    // ...other presets
  ],
})
// uno.config.ts
import { defineConfig } from 'unocss'
import presetMini from '@unocss/preset-mini'

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

TIP

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

ts
import { presetMini } from 'unocss'
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 (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.

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

will generate:

css
.dark .dark\:bg-red\:10 {
  background-color: rgba(248, 113, 113, 0.1);
}
.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:

html
<div class="@dark:bg-red:10" />
<div class="@dark:bg-red:10" />
css
@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgba(248, 113, 113, 0.1);
  }
}
@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

ts
presetMini({
  dark: 'media'
})
presetMini({
  dark: 'media'
})

CSS @layer

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

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

will generate:

css
@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}
@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.

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

To consume the theme in rules:

ts
rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]
rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]

WARNING

One exception is that UnoCSS gives full control of breakpoints to users. When a custom breakpoints is provided, the default will be overridden instead of merging.

With the following example, you will be able to only use the sm: and md: breakpoint variants:

ts
presetMini({
  theme: {
    // ...
    breakpoints: {
      sm: '320px',
      md: '640px',
    },
  },
})
presetMini({
  theme: {
    // ...
    breakpoints: {
      sm: '320px',
      md: '640px',
    },
  },
})

INFO

verticalBreakpoints is same as breakpoints but for vertical layout.

Options

dark

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

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

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

  /**
   * Selector for dark variant.
   *
   * @default '.dark'
   */
  dark?: string
}
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 variables.

prefix

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

Utils prefix.

preflight

  • Type: boolean
  • Default: true

Generate preflight.

Released under the MIT License.