Lagen

De volgorde van CSS zal hun prioriteiten beïnvloeden. Hoewel de engine de volgorde van regels behoudt, wil je soms sommige utilities groeperen om expliciete controle over hun volgorde te hebben.

Gebruik

In tegenstelling tot Tailwind CSS die drie vaste lagen biedt (base, components, utilities), stelt UnoCSS je in staat om de lagen te definiëren zoals je wilt. Om de laag in te stellen, kun je de metadata doorgeven als het derde item van je regels:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // wanneer je de laag weglaat, wordt het `default`
  ['btn', { padding: '4px' }],
]

Dit zal genereren:

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

Laag kan ook worden ingesteld op elke preflight:

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

Volgorde

Je kunt de volgorde van lagen bepalen door:

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