层

🌐 Layers

CSS 的顺序会影响它们的优先级。虽然引擎会保留规则的顺序，但有时你可能希望对一些工具类进行分组，以便明确控制它们的顺序。

🌐 The order of CSS will affect their priorities. While the engine will retain the order of rules, sometimes you may want to group some utilities to have explicit control of their order.

用法

🌐 Usage

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

🌐 Unlike Tailwind CSS which offers three fixed layers (base, components, utilities), UnoCSS allows you to define the layers as you want. To set the layer, you can pass the metadata as the third item of your rules:

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(),
  },
]

排序

🌐 Ordering

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

🌐 You can control the order of layers by:

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

没有指定顺序的图层将按字母顺序排序。

🌐 Layers without specified order will be sorted alphabetically.

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

🌐 When you want to have your custom CSS between layers, you can update your entry module:

// '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'

CSS 级联层

🌐 CSS Cascade Layers

你可以通过以下方式输出 CSS Cascade Layers：

🌐 You can output CSS Cascade Layers by:

outputToCssLayers: true

你可以使用以下命令更改 CSS 层名称：

🌐 You can change the CSS Layer names with:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // The default layer will be output to the "utilities" CSS layer.
    if (layer === 'default')
      return 'utilities'

    // The shortcuts layer will be output to the "shortcuts" sublayer the of "utilities" CSS layer.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // All other layers will just use their name as the CSS layer name.
  }
}

输出所有 CSS 层

🌐 Output All CSS Layers

UnoCSS 默认会输出所有使用过的 CSS 层。如果你想强制输出所有已定义的 CSS 层，可以设置 allLayers 选项：

🌐 UnoCSS outputs all used CSS layers by default. If you want to force output all defined CSS layers, you can set the allLayers option:

outputToCssLayers: {
  allLayers: true,
}

它将输出所有已定义的 CSS 层，即使它们未被使用。

🌐 It will output all defined CSS layers, even if they are not used.

@layer theme, preflights, unused-layer, default;

/* generated CSS */

使用变体的图层

🌐 Layers using variants

可以使用变体创建图层。

🌐 Layers can be created using variants.

uno-layer-<name>: 可以用来创建 UnoCSS 层。

<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>: 可以用来创建一个 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; } }