レイヤー

CSSの順序は優先度に影響します。エンジンはルールの順序を保持しますが、時にはユーティリティをグループ化して順序を明示的に制御したい場合があります。

使用方法

Tailwind CSSが3つの固定レイヤー（base、components、utilities）を提供するのとは異なり、UnoCSSではレイヤーを自由に定義できます。レイヤーを設定するには、ルールの3番目の項目としてメタデータを渡すことができます：

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) => {
    // デフォルトレイヤーは"utilities" CSSレイヤーに出力されます
    if (layer === 'default')
      return 'utilities'

    // ショートカットレイヤーは"utilities" CSSレイヤーの"shortcuts"サブレイヤーに出力されます
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // その他のレイヤーは名前をそのままCSSレイヤー名として使用します
  }
}

バリアントを使用したレイヤー

レイヤーはバリアントを使用して作成できます。

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; } }