层级

CSS 的顺序会影响它们的优先级。虽然引擎会保持规则的顺序，但有时您可能希望将一些工具类分组以显式控制它们的顺序。

用法

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

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // 当您省略层级时，它将是 `default`
  ['btn', { padding: '4px' }],
]

这将生成：

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

也可以在每个预设样式上设置层级：

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'

// 非 'components' 和 'utilities' 的层级将回退到这里
import 'uno.css'

// 您自己的 CSS
import './my-custom.css'

// "utilities" 层级将具有最高优先级
import 'uno:utilities.css'

CSS 层叠层

您可以通过以下方式输出 CSS 层叠层：

outputToCssLayers: true

您可以通过以下方式更改 CSS 层的名称：

outputToCssLayers: {
  cssLayerName: (layer) => {
    // 默认的 layer 会输出到 "utilities" CSS layer。
    if (layer === 'default')
      return 'utilities'

    // "shortcuts" layer 会输出到 "utilities" CSS layer 的 "shortcuts" 子层。
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // 所有其他的 layer 都会使用它们的名字作为 CSS layer 的名称。
  }
}

Layers using variants

Layers can be created using variants.

uno-layer-<name>: can be used to create a UnoCSS layer.

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

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

layer-<name>: can be used to create a CSS @layer.

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

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