O que é UnoCSS?

UnoCSS é o mecanismo de CSS atômico instantâneo, projetado para ser flexível e extensível. O núcleo é agnóstico e todos os utilitários CSS são fornecidos por meio de presets.

Por exemplo, você pode definir seus próprios utilitários CSS, fornecendo regras em seu arquivo de configuração local.

import { defineConfig } from 'unocss'

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

Isso adicionará um novo utilitário CSS m-1 ao seu projeto. Como o UnoCSS é sob demanda, ele não fará nada até que você o use em sua base de código. Então, digamos que temos um componente como este:

html

<div class="m-1">Olá</div>

m-1 será detectado e o seguinte CSS será gerado:

css

.m-1 { margin: 1px; }

Para torná-lo mais flexível, você pode tornar sua regra dinâmica alterando o primeiro argumento da regra (chamamos de matcher) para uma RegExp, e o corpo para uma função, por exemplo:

diff

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

Fazendo isso, agora você pode ter utilitários de margem arbitrários, como m-1, m-100 ou m-52.43. E novamente, o UnoCSS só os gera quando você os usa.

html

<div class="m-1">Olá</div>
<div class="m-7.5">Mundo</div>

css

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

Presets

Depois de criar algumas regras, você pode extraí-las para um preset e compartilhá-las com outros. Por exemplo, você pode criar um preset para o sistema de design da sua empresa e compartilhá-lo com sua equipe.

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, // seu próprio preset
  ],
})

Assim, fornecemos alguns presets oficiais para você começar a usar imediatamente, e você também pode encontrar muitos presets interessantes da comunidade.