Getting Started

@vinicunca/unocss-preset is Vinicunca's UnoCSS preset. It bundles presetWind4, presetIcons, a CSS reset, fluid sizing, and enter/exit animations. Scrollbars, Magic CSS, typography, and web fonts are opt-in.

Installation

pnpm add -D unocss @vinicunca/unocss-preset

npm install -D unocss @vinicunca/unocss-preset

bun add -d unocss @vinicunca/unocss-preset

Usage

Add the preset to uno.config.ts:

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca()
  ]
});

You do not add presetWind4 or presetIcons yourself. presetVinicunca() already includes them.

Usage with Pohon UI, Nuxt, and Vite

Pohon UI

Pohon UI already depends on this preset. Create uno.config.ts with presetVinicunca() and let Pohon register UnoCSS:

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [presetVinicunca()]
});

That is the same setup as Pohon on Nuxt and Pohon on Vue. This docs hub extends the theme with extra accordion and toast keyframes; you only need that if you copy those animations.

Nuxt

Install @unocss/nuxt (Pohon already registers it) and keep the same uno.config.ts:

export default defineNuxtConfig({
  modules: ['@unocss/nuxt']
});

Vite

Add the Vite plugin and import the virtual CSS entry:

import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    UnoCSS(),
    vue()
  ]
});

import 'virtual:uno.css';

What's included

Preflights

When preflights is true (the default), the preset injects a CSS reset on the preflights layer. It is the stylesheet in src/core/preflights/reset.ts. Wind4's own reset is turned off so the two do not stack.

The reset uses --default-font-family / --default-font-featureSettings, border: 0 solid, -webkit-font-smoothing: antialiased, and [hidden]:where(:not([hidden~='until-found'])). Placeholders inherit a faded currentcolor via color-mix; they are not hard-coded gray.

Disable it with:

presetVinicunca({
  preflights: false
});

Presets

There is no wind3 preset and no Akar preset. Akar support was removed in v2.1.0.

Transformers

Directives and variant groups are on by default. The alias transformer is opt-in.

Extract color channels

Set unColor to extract the RGB channels of generated colors into a CSS variable so you can reuse them with opacity:

presetVinicunca({
  unColor: true // writes --un-color
});

Pass a string to choose the variable name: unColor: '--my-color'. true and '--un-color' are equivalent. See Options.

Next