UnoCSSMini preset
The basic preset for UnoCSS, with only the most essential utilities.
Installation
pnpm add -D @unocss/preset-minipnpm add -D @unocss/preset-miniyarn add -D @unocss/preset-miniyarn add -D @unocss/preset-mininpm install -D @unocss/preset-mininpm install -D @unocss/preset-mini// 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:
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.
<div class="dark:bg-red:10" /><div class="dark:bg-red:10" />will generate:
.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:
<div class="@dark:bg-red:10" /><div class="@dark:bg-red:10" />@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
presetMini({
dark: 'media'
})presetMini({
dark: 'media'
})CSS @layer
CSS's native @layer is supported with variant layer-xx:
<div class="layer-foo:p4" />
<div class="layer-bar:m4" /><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;
}
}@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.
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:
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:
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).
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.