UnoCSS

Integrates UnoCSS for atomic CSS styling in Manic. An alternative to Tailwind CSS with more flexibility.

Installation

bun add @manicjs/unocss

Quick Start

1. Add the Plugin

// manic.config.ts
import {  } from 'manicjs/config';
declare function (?: <string, unknown>): { : string };

export default ({
  : [()],
});

The unocss() plugin takes no options. It registers bun-plugin-unocss which auto-detects your UnoCSS configuration from the project root.

2. Create `uno.config.ts`

All UnoCSS configuration lives in uno.config.ts at your project root:

// uno.config.ts
declare function (: <string, unknown>): { : any[] };
declare function (): { : string };
declare function (?: <string, unknown>): { : string };

export default ({
  : [
    (),
    (),
  ],
});

UnoCSS Presets

Core Presets

// uno.config.ts
declare function (: <string, unknown>): { : any[] };
declare function (): { : string };
declare function (?: <string, unknown>): { : string };
declare function (): { : string };

export default ({
  : [
    (),           // Core utilities
    (),         // Icon set
    (),      // Google Fonts
  ],
});

Attributify Mode

// uno.config.ts
declare function (: <string, unknown>): unknown;
declare function (): unknown;
declare function (?: <string, unknown>): unknown;

export default ({
  : [
    (),
    ({
      /* attributify options */
    }),
  ],
});

Then use in JSX:

<>
  < class="flex gap-2" />Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?
  < flex  />       {/* attributify */}Type '{ flex: true; "gap-2": true; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'flex' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  <  />        {/* color shortcuts */}
</>

Custom Rules

// uno.config.ts
declare function (: <string, unknown>): unknown;
declare function (): unknown;

export default ({
  : [()],
  : [
    [/^text-(.*)$/, ([]: [string]) => ({ :  })],
    ['custom-shadow', { 'box-shadow': '0 4px 6px rgba(0,0,0,0.1)' }],
  ],
});

Shortcuts

Define reusable class combinations:

// uno.config.ts
declare function (: <string, unknown>): unknown;
declare function (): unknown;

export default ({
  : [()],
  : [
    ['btn', 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600'],
    ['input-field', 'w-full px-3 py-2 border border-gray-300 rounded'],
  ],
});

Usage:

<>
  < class="btn">Click</>Type '{ children: string; class: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'. Did you mean 'className'?
  < class="input-field" />Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. Did you mean 'className'?
</>

Icon Sets

// uno.config.ts
declare function (: <string, unknown>): unknown;
declare function (): unknown;
declare function (?: <string, unknown>): unknown;

export default ({
  : [
    (),
    ({
      : 1.2,
      : 'https://esm.sh/',
    }),
  ],
});

<>
  < class="i-carbon-sun text-xl" />Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'. Did you mean 'className'?
  < class="i-carbon-moon text-xl" />Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'. Did you mean 'className'?
</>

Theme Integration

// uno.config.ts
declare function (: <string, unknown>): unknown;
declare function (): unknown;

export default ({
  : [()],
  : {
    : {
      : '#3b82f6',
      : '#8b5cf6',
    },
  },
});

Vs Tailwind CSS

Feature	UnoCSS	Tailwind CSS
Bundle size	Smaller (atomic only)	Full framework
Customization	More flexible	Fixed methodology
Icon system	Built-in	Requires plugin
Attributify mode	Native	No
Virtual modules	Yes	No

UnoCSS

UnoCSS

Installation

Quick Start

1. Add the Plugin

2. Create `uno.config.ts`

UnoCSS Presets

Core Presets

Attributify Mode

Custom Rules

Shortcuts

Icon Sets

Theme Integration

Vs Tailwind CSS

See Also

On this page