Wat is UnoCSS?

UnoCSS is de instant atomaire CSS engine, ontworpen om flexibel en uitbreidbaar te zijn. De core is on-opinionated en alle CSS utilities worden geleverd via presets.

Bijvoorbeeld, je zou je aangepaste CSS utilities kunnen definiëren, door regels te leveren in je lokale configuratie bestand.

import { defineConfig } from 'unocss'

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

Dit zal een nieuwe CSS utility m-1 toevoegen aan je project. Omdat UnoCSS on-demand is, zal het niets doen tot je het gebruikt in je codebase. Dus laten we zeggen dat we een component hebben zoals dit:

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

m-1 zal worden gedetecteerd en de volgende CSS zal worden gegenereerd:

.m-1 { margin: 1px; }

Om het flexibeler te maken, kun je je regel dynamisch maken door het eerste argument van de regel (we noemen het matcher) te veranderen naar een RegExp, en de body naar een functie, bijvoorbeeld:

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

Door dit te doen, kun je nu willekeurige margin utilities hebben, zoals m-1, m-100 of m-52.43. En opnieuw, UnoCSS genereert ze alleen wanneer je ze gebruikt.

<div class="m-100">Hallo</div>
<div class="m-52.43">World</div>

De volgende CSS zal worden gegenereerd:

.m-100 { margin: 100px; }
.m-52.43 { margin: 52.43px; }

Presets

Zoals je kunt zien, is het definiëren van aangepaste regels vrij eenvoudig. Echter, in de meeste gevallen hoef je je eigen regels niet te definiëren, aangezien UnoCSS wordt geleverd met veel ingebouwde presets:

• @unocss/preset-mini - De minimale preset die de kern functionaliteit bevat
• @unocss/preset-wind - Wind CSS compatibele preset
• @unocss/preset-attributify - Attributify mode voor utilities
• @unocss/preset-icons - Icon preset
• etc.

Je kunt eenvoudig meerdere presets tegelijk gebruiken:

import { defineConfig } from 'unocss'
import presetMini from '@unocss/preset-mini'
import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetMini(),
    presetAttributify(),
  ],
})

Attributify

Met attributify preset kun je de prefix van je utilities groupen:

<button bg="blue-400 hover:blue-500" text="sm white" font="bold" p="y-2 x-4">
  Knop
</button>

Dit maakt je code schoner en beter leesbaar.

Shortcuts

Je kunt ook shortcuts gebruiken om meerdere utilities te combineren:

shortcuts: {
  'btn': 'px-4 py-2 rounded-lg font-semibold transition-colors',
  'btn-blue': 'btn bg-blue-500 text-white hover:bg-blue-600',
}

<button class="btn btn-blue">
  Klik mij
</button>

Integraties

UnoCSS heeft eersteklas integraties met populaire frameworks en tools:

• Vite - De aanbevolen manier om UnoCSS te gebruiken
• Webpack
• PostCSS
• CLI
• VS Code
• ESLint

Zie de integraties pagina voor meer informatie.

Tools

UnoCSS wordt ook geleverd met handige tools:

• Inspector - Inspecteer en debug je CSS
• Autocomplete - Intelligente autocomplete in je IDE

Volgende stappen

• Lees de configuratie referentie
• Ontdek de presets
• Leer over integraties