1---
2name: unocss-layers-preflights
3description: CSS layer ordering and raw CSS injection
4---
5 
6# Layers and Preflights
7 
8Control CSS output order and inject global CSS.
9 
10## Layers
11 
12Set layer on rules:
13 
14```ts
15rules: [
16  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
17  ['btn', { padding: '4px' }], // default layer
18]
19```
20 
21### Layer Ordering
22 
23```ts
24layers: {
25  'components': -1,
26  'default': 1,
27  'utilities': 2,
28}
29```
30 
31### Import Layers Separately
32 
33```ts
34import 'uno:components.css'
35import 'uno.css'
36import './my-custom.css'
37import 'uno:utilities.css'
38```
39 
40### CSS Cascade Layers
41 
42```ts
43outputToCssLayers: true
44 
45// Or with custom names
46outputToCssLayers: {
47  cssLayerName: (layer) => {
48    if (layer === 'default') return 'utilities'
49    if (layer === 'shortcuts') return 'utilities.shortcuts'
50  }
51}
52```
53 
54## Layer Variants
55 
56```html
57<!-- UnoCSS layer -->
58<p class="uno-layer-my-layer:text-xl">
59 
60<!-- CSS @layer -->
61<p class="layer-my-layer:text-xl">
62```
63 
64## Preflights
65 
66Inject raw CSS globally:
67 
68```ts
69preflights: [
70  {
71    getCSS: ({ theme }) => `
72      * {
73        color: ${theme.colors.gray?.[700] ?? '#333'};
74        margin: 0;
75      }
76    `,
77  },
78]
79```
80 
81With layer:
82 
83```ts
84preflights: [
85  {
86    layer: 'base',
87    getCSS: () => `html { font-family: system-ui; }`,
88  },
89]
90```
91 
92## preset-wind4 Layers
93 
94| Layer | Description | Order |
95|-------|-------------|-------|
96| `properties` | CSS @property rules | -200 |
97| `theme` | Theme CSS variables | -150 |
98| `base` | Reset styles | -100 |
99 
100<!-- 
101Source references:
102- https://unocss.dev/config/layers
103- https://unocss.dev/config/preflights
104-->
105