层级

UnoCSS允许 CSS 的顺序会影响其优先级。虽然引擎会保留规则的顺序，但有时你可能希望将某些工具类分组，以便显式控制它们的顺序。

用法

与 Tailwind CSS 提供三个固定层级（base、components、utilities）不同，UnoCSS 允许你按需定义层级。要设置层级，可以将元数据作为规则的第三项传入：

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // when you omit the layer, it will be `default`
  ['btn', { padding: '4px' }],
]

This will generate:

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

Layer also can be set on each preflight:

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

排序

你可以通过以下方式控制层级的顺序：

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

未指定顺序的层级将按字母顺序排序。

当你想在层级之间插入自定义 CSS 时，你可以更新入口模块：

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

// layers that are not 'components' and 'utilities' will fallback to here
import 'uno.css'

// your own CSS
import './my-custom.css'

// "utilities" layer will have the highest priority
import 'uno:utilities.css'