Preset Mini

El preset básico para UnoCSS, con solo las utilidades más esenciales.

Código Fuente

Instalación

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

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

export default defineConfig({
  presets: [
    presetMini(),
    // ...otros presets
  ],
})

TIP

Este preset está incluido en el paquete unocss, también puedes importarlo desde ahí:

import { presetMini } from 'unocss'

Reglas

Este preset es un subconjunto de @unocss/preset-wind3, que contiene solo las utilidades más esenciales alineadas con las propiedades de CSS, pero excluye utilidades opinadas o complicadas introducidas en Tailwind CSS (container, animation, gradient, etc.). Esto puede ser un buen punto de partida para tu propio preset personalizado sobre utilidades familiares de Tailwind CSS o Windi CSS.

Características

Modo oscuro

Por defecto, este preset genera modo oscuro basado en clases con la variante dark:.

<div class="dark:bg-red:10" />

generará:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

Modo oscuro basado en media query

Para usar en su lugar modo oscuro basado en media query globalmente puedes cambiar la configuración para la variante dark::

presetMini({
  dark: 'media'
})

Ahora

<div class="dark:bg-red:10" />

generará:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

CSS @layer

El @layer nativo de CSS es soportado con la variante layer-xx::

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

generará:

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

Tema

Puedes personalizar completamente tu propiedad de tema en tu configuración, y UnoCSS eventualmente la fusionará profundamente con el tema predeterminado.

WARNING

La propiedad breakpoints no se fusiona profundamente, sino que se sobrescribe, consulta Breakpoints.

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

Opciones

dark

• Tipo: class | media | DarkModeSelectors
• Predeterminado: class

Las opciones del modo oscuro. Puede ser class, media, o un objeto selector personalizado (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Selector para la variante clara.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selector para la variante oscura.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Tipo: Boolean
• Predeterminado: false

Generar selector pseudo como [group=""] en lugar de .group.

variablePrefix

• Tipo: string
• Predeterminado: un-

Prefijo para propiedades CSS personalizadas.

prefix

• Tipo: string | string[]
• Predeterminado: undefined

Prefijo de utilidades.

preflight

• Tipo: boolean | on-demand
• Predeterminado: true

Generar CSS preflight. Puede ser:

• true: siempre generar preflight.
• false: sin preflight.
• on-demand: solo generar preflight para utilidades usadas.