Unocss preset pico

An preset to ease the usage of Pico css with Unocss.

It adds all Pico css colors the theme, so you can use it in classes:

<p text-pico-primary>Hello pico!!</p>

Will generate the css class:

.text-pico-primary {
  color: var(--pico-primary);
}

See All the Pico css variables on the documentation website.

Installation:

npm install -D unocss-preset-pico

Configuration

Add the preset to your unocss.config.ts file:

import { defineConfig, presetUno } from "unocss";
import presetPico from "unocss-preset-pico";

export default defineConfig({
  presets: [presetUno(), presetPico()],
});