What is UnoCSS?

UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated and all the CSS utilities are provided via presets.

For example, you could define your custom CSS utilities, by providing rules in your localconfig file.

uno.config.ts

import { defineConfig } from 'unocss'export default defineConfig({  rules: [    ['m-1', {margin:'1px' }],  ],})

This will add a new CSS utilitym-1 to your project. Since UnoCSS is on-demand, it won't do anything until you use it in your codebase. So say we have a component like this:

html

<div class="m-1">Hello</div>

m-1 will be detected and the following CSS will be generated:

css

.m-1 { margin: 1px; }

To make it more flexible, you can make your rule dynamic by changing the first argument on the rule (we call it matcher) to aRegExp, and the body to a function, for example:

uno.config.ts

diff

export default defineConfig({  rules: [-    ['m-1', { margin: '1px' }],+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],  ],})

By doing this, now you can have arbitrary margin utilities, likem-1,m-100 orm-52.43. And again, UnoCSS only generates them whenever you use them.

html

<div class="m-1">Hello</div><div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }.m-7.5 { margin: 7.5px; }

Presets

Once you made a few rules, you can extract them into a preset, and share it with others. For example, you can create a preset for your company's design system, and share it with your team.

my-preset.ts

import { Preset } from 'unocss'export constmyPreset:Preset = {  name:'my-preset',  rules: [    [/^m-([.\d]+)$/, ([_,num]) => ({margin:`${num}px` })],    [/^p-([.\d]+)$/, ([_,num]) => ({padding:`${num}px` })],  ],  variants: [/* ... */],  shortcuts: [/* ... */],  // ...}

uno.config.ts

import { defineConfig } from 'unocss'import { myPreset } from './my-preset'export default defineConfig({  presets: [    myPreset,// your own preset  ],})