层级

CSS 的顺序会影响它们的优先级。虽然引擎会保留规则的顺序，但有时你可能想要将一些实用工具分组，以便显式控制它们的顺序。

使用

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

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

这将生成:

css

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

层级也可以在每个预检中设置:

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

Ordering

你可以通过:

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: (layer) => {
  // 默认层将输出到 "utilities" CSS 层。
  if (layer === 'default')
    return 'utilities'

  // 快捷方式层将输出到 "utilities" CSS 层的 "shortcuts" 子层。
  if (layer === 'shortcuts')
    return 'utilities.shortcuts'

  // 所有其他层将直接使用它们的名称作为 CSS 层的名称。
}

层级 ​

使用 ​

Ordering ​

CSS 层叠层级 ​

层级

使用

Ordering

CSS 层叠层级