Camadas

A ordem do CSS afetará suas prioridades. Embora o motor mantenha a ordem das regras, às vezes você pode querer agrupar alguns utilitários para ter controle explícito de sua ordem.

Uso

Diferentemente do Tailwind CSS, que oferece três camadas fixas (base, components, utilities), o UnoCSS permite definir as camadas como você quiser. Para definir a camada, você pode passar os metadados como o terceiro item de suas regras:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // quando você omite a camada, será `default`
  ['btn', { padding: '4px' }],
]

Isso gerará:

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

A camada também pode ser definida em cada preflight:

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

Ordenação

Você pode controlar a ordem das camadas por:

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

Camadas sem ordem especificada serão classificadas alfabeticamente.

Quando você quiser ter seu CSS personalizado entre camadas, pode atualizar seu módulo de entrada:

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

// camadas que não são 'components' e 'utilities' terão fallback aqui
import 'uno.css'

// seu próprio CSS
import './my-custom.css'

// a camada "utilities" terá a maior prioridade
import 'uno:utilities.css'

Camadas em Cascata CSS

Você pode gerar Camadas em Cascata CSS por:

outputToCssLayers: true

Você pode alterar os nomes das Camadas CSS com:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // A camada padrão será gerada na camada CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // A camada de atalhos será gerada na subcamada "shortcuts" da camada CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Todas as outras camadas usarão simplesmente seu nome como o nome da camada CSS.
  }
}

Camadas usando variantes

Camadas podem ser criadas usando variantes.

uno-layer-<n>: pode ser usado para criar uma camada do 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-<n>: pode ser usado para criar uma @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; } }