Capas

El orden del CSS afectará sus prioridades. Aunque el motor mantendrá el orden de las reglas, a veces puedes querer agrupar algunas utilidades para tener control explícito de su orden.

Uso

A diferencia de Tailwind CSS que ofrece tres capas fijas (base, components, utilities), UnoCSS te permite definir las capas como quieras. Para establecer la capa, puedes pasar los metadatos como el tercer elemento de tus reglas:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // cuando omites la capa, será `default`
  ['btn', { padding: '4px' }],
]

Esto generará:

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

La capa también se puede establecer en cada preflight:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

Ordenamiento

Puedes controlar el orden de las capas por:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

Las capas sin orden especificado se ordenarán alfabéticamente.

Cuando quieras tener tu CSS personalizado entre capas, puedes actualizar tu módulo de entrada:

// 'uno:[layer-name].css'
import 'uno:components.css'

// las capas que no son 'components' y 'utilities' caerán aquí
import 'uno.css'

// tu propio CSS
import './my-custom.css'

// la capa "utilities" tendrá la prioridad más alta
import 'uno:utilities.css'

Capas CSS Cascade

Puedes generar Capas CSS Cascade por:

outputToCssLayers: true

Puedes cambiar los nombres de las Capas CSS con:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // La capa por defecto se generará en la capa CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // La capa de atajos se generará en la subcapa "shortcuts" de la capa CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Todas las demás capas simplemente usarán su nombre como el nombre de la capa CSS.
  }
}

Capas usando variantes

Las capas se pueden crear usando variantes.

uno-layer-<name>: se puede usar para crear una capa UnoCSS.

<p class="uno-layer-my-layer:text-xl">texto</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>: se puede usar para crear una @layer CSS.

<p class="layer-my-layer:text-xl">texto</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }