Cos'è UnoCSS?

UnoCSS è il motore CSS atomico istantaneo, progettato per essere flessibile ed estensibile. Il nucleo è non-opinionato e tutte le utility CSS sono fornite tramite preset.

Ad esempio, potresti definire le tue utility CSS personalizzate, fornendo regole nel tuo file di configurazione locale.

import { defineConfig } from 'unocss'

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

Questo aggiungerà una nuova utility CSS m-1 al tuo progetto. Poiché UnoCSS è on-demand, non farà nulla finché non lo usi nella tua codebase. Quindi diciamo che abbiamo un componente come questo:

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

m-1 sarà rilevato e verrà generato il seguente CSS:

.m-1 { margin: 1px; }

Per renderlo più flessibile, puoi rendere la tua regola dinamica cambiando il primo argomento della regola (lo chiamiamo matcher) in un RegExp, e il corpo in una funzione, ad esempio:

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

Facendo questo, ora puoi avere utility di margine arbitrarie, come m-1, m-100 o m-52.43. E ancora, UnoCSS le genera solo quando le usi.

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

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

Preset

Una volta create alcune regole, puoi estrarle in un preset e condividerle con altri. Ad esempio, puoi creare un preset per il sistema di design della tua azienda e condividerlo con il tuo 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, // il tuo preset personalizzato
  ],
})

Allo stesso modo, abbiamo fornito alcuni preset ufficiali per iniziare a usare subito, e puoi anche trovare molti interessanti preset della comunità.

Prova

Puoi provare UnoCSS nel tuo browser, nel Playground. Oppure cerca utility dai preset predefiniti nella Documentazione Interattiva.

Integrazioni

UnoCSS viene fornito con integrazioni per vari framework / strumenti:

Esempi

Il codice sorgente per tutti gli esempi può essere trovato nella directory /examples.