1---
2name: preset-mini
3description: Minimal preset with essential utilities for UnoCSS
4---
5 
6# Preset Mini
7 
8The minimal preset with only essential rules and variants. Good starting point for custom presets.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetMini } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetMini(),
18  ],
19})
20```
21 
22## What's Included
23 
24Subset of `preset-wind3` with essential utilities aligned to CSS properties:
25 
26- Basic spacing (margin, padding)
27- Display (flex, grid, block, etc.)
28- Positioning (absolute, relative, fixed)
29- Sizing (width, height)
30- Colors (text, background, border)
31- Typography basics (font-size, font-weight)
32- Borders and border-radius
33- Basic transforms and transitions
34 
35## What's NOT Included
36 
37Opinionated or complex Tailwind utilities:
38- `container`
39- Complex animations
40- Gradients
41- Advanced typography
42- Prose classes
43 
44## Use Cases
45 
461. **Building custom presets** - Start with mini and add only what you need
472. **Minimal bundle size** - When you only need basic utilities
483. **Learning** - Understand UnoCSS core without Tailwind complexity
49 
50## Dark Mode
51 
52Same as preset-wind3:
53 
54```ts
55presetMini({
56  dark: 'class' // or 'media'
57})
58```
59 
60```html
61<div class="dark:bg-red:10" />
62```
63 
64Class-based:
65```css
66.dark .dark\:bg-red\:10 {
67  background-color: rgb(248 113 113 / 0.1);
68}
69```
70 
71Media query:
72```css
73@media (prefers-color-scheme: dark) {
74  .dark\:bg-red\:10 {
75    background-color: rgb(248 113 113 / 0.1);
76  }
77}
78```
79 
80## CSS @layer Variant
81 
82Native CSS layer support:
83 
84```html
85<div class="layer-foo:p4" />
86```
87 
88```css
89@layer foo {
90  .layer-foo\:p4 {
91    padding: 1rem;
92  }
93}
94```
95 
96## Theme Customization
97 
98```ts
99presetMini({
100  theme: {
101    colors: {
102      veryCool: '#0000ff',
103      brand: {
104        primary: 'hsl(var(--hue, 217) 78% 51%)',
105      }
106    },
107  }
108})
109```
110 
111**Note:** `breakpoints` property is overridden, not merged.
112 
113## Options
114 
115```ts
116presetMini({
117  // Dark mode: 'class' | 'media' | { light: string, dark: string }
118  dark: 'class',
119  
120  // Generate [group=""] instead of .group for attributify
121  attributifyPseudo: false,
122  
123  // CSS variable prefix (default: 'un-')
124  variablePrefix: 'un-',
125  
126  // Utility prefix
127  prefix: undefined,
128  
129  // Preflight generation: true | false | 'on-demand'
130  preflight: true,
131})
132```
133 
134## Building on Mini
135 
136Create custom preset extending mini:
137 
138```ts
139import { presetMini } from 'unocss'
140import type { Preset } from 'unocss'
141 
142export const myPreset: Preset = {
143  name: 'my-preset',
144  presets: [presetMini()],
145  rules: [
146    // Add custom rules
147    ['card', { 'border-radius': '8px', 'box-shadow': '0 2px 8px rgba(0,0,0,0.1)' }],
148  ],
149  shortcuts: {
150    'btn': 'px-4 py-2 rounded bg-blue-500 text-white',
151  },
152}
153```
154 
155<!-- 
156Source references:
157- https://unocss.dev/presets/mini
158-->
159