¿Qué es UnoCSS?

UnoCSS es el motor de CSS atómico instantáneo, que está diseñado para ser flexible y extensible. El núcleo no tiene opiniones y todas las utilidades CSS se proporcionan a través de presets.

Por ejemplo, podrías definir tus utilidades CSS personalizadas, proporcionando reglas en tu archivo de configuración local.

import { defineConfig } from 'unocss'

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

Esto agregará una nueva utilidad CSS m-1 a tu proyecto. Como UnoCSS es bajo demanda, no hará nada hasta que la uses en tu código base. Entonces digamos que tenemos un componente como este:

html

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

m-1 será detectado y se generará el siguiente CSS:

css

.m-1 { margin: 1px; }

Para hacerlo más flexible, puedes hacer tu regla dinámica cambiando el primer argumento de la regla (lo llamamos matcher) a un RegExp, y el cuerpo a una función, por ejemplo:

diff

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

Al hacer esto, ahora puedes tener utilidades de margen arbitrarias, como m-1, m-100 o m-52.43. Y nuevamente, UnoCSS solo las genera cuando las uses.

html

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

css

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

Presets

Una vez que hayas hecho algunas reglas, puedes extraerlas en un preset y compartirlas con otros. Por ejemplo, puedes crear un preset para el sistema de diseño de tu empresa y compartirlo con tu equipo.

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, // tu propio preset
  ],
})

De manera similar, proporcionamos algunos presets oficiales para que puedas comenzar a usar inmediatamente, y también puedes encontrar muchos presets de la comunidad interesantes.