---
name: unocss-layers-preflights
description: CSS layer ordering and raw CSS injection
---

# Layers and Preflights

Control CSS output order and inject global CSS.

## Layers

Set layer on rules:

```ts
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  ['btn', { padding: '4px' }], // default layer
];
```

### Layer Ordering

```ts
layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
}
```

### Import Layers Separately

```ts
import 'uno:components.css';
import 'uno.css';
import './my-custom.css';
import 'uno:utilities.css';
```

### CSS Cascade Layers

```ts
outputToCssLayers: true;

// Or with custom names
outputToCssLayers: {
  cssLayerName: (layer) => {
    if (layer === 'default') return 'utilities';
    if (layer === 'shortcuts') return 'utilities.shortcuts';
  };
}
```

## Layer Variants

```html
<!-- UnoCSS layer -->
<p class="uno-layer-my-layer:text-xl">
  <!-- CSS @layer -->
</p>

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

## Preflights

Inject raw CSS globally:

```ts
preflights: [
  {
    getCSS: ({ theme }) => `
      * {
        color: ${theme.colors.gray?.[700] ?? '#333'};
        margin: 0;
      }
    `,
  },
];
```

With layer:

```ts
preflights: [
  {
    layer: 'base',
    getCSS: () => `html { font-family: system-ui; }`,
  },
];
```

## preset-wind4 Layers

| Layer        | Description         | Order |
| ------------ | ------------------- | ----- |
| `properties` | CSS @property rules | -200  |
| `theme`      | Theme CSS variables | -150  |
| `base`       | Reset styles        | -100  |

<!--
Source references:
- https://unocss.dev/config/layers
- https://unocss.dev/config/preflights
-->
