Vad är UnoCSS?

UnoCSS är den omedelbara atomära CSS-motorn, som är designad för att vara flexibel och utökbar. Kärnan är oberoende och alla CSS-verktyg tillhandahålls via presets.

Till exempel kan du definiera dina anpassade CSS-verktyg genom att tillhandahålla regler i din lokala konfigurationsfil.

import { defineConfig } from 'unocss'

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

Detta kommer att lägga till ett nytt CSS-verktyg m-1 till ditt projekt. Eftersom UnoCSS är on-demand kommer det inte att göra något förrän du använder det i din kodbas. Så låt oss säga att vi har en komponent som denna:

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

m-1 kommer att upptäckas och följande CSS kommer att genereras:

.m-1 { margin: 1px; }

För att göra det mer flexibelt kan du göra din regel dynamisk genom att ändra det första argumentet på regeln (vi kallar det matcher) till en RegExp, och bodyn till en funktion, till exempel:

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

Genom att göra detta kan du nu ha godtyckliga marginalverktyg, som m-1, m-100 eller m-52.43. Och återigen, UnoCSS genererar dem bara när du använder dem.

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

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

Presets

När du har gjort några regler kan du extrahera dem till en preset och dela dem med andra. Till exempel kan du skapa en preset för ditt företags designsystem och dela den med ditt team.

import { Preset } from 'unocss'

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

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // din egen preset
  ],
})

På samma sätt tillhandahåller vi några officiella presets för dig att börja använda direkt, och du kan också hitta många intressanta community-preset.

Testa

Du kan prova UnoCSS i din webbläsare i Playground. Eller slå upp verktyg från standardpresets i Interactive Docs.

Integrationer

UnoCSS kommer med integrationer för olika ramverk/verktyg:

Exempel

Källkod för alla exempel finns i /examples katalogen.