1---
2name: preset-wind4
3description: Tailwind CSS v4 compatible preset with enhanced features
4---
5 
6# Preset Wind4
7 
8The Tailwind CSS v4 compatible preset. Enhances preset-wind3 with modern CSS features.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetWind4 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind4(),
18  ],
19})
20```
21 
22## Key Differences from Wind3
23 
24### Built-in CSS Reset
25 
26No need for `@unocss/reset` - reset is built-in:
27 
28```ts
29// Remove these imports
30import '@unocss/reset/tailwind.css' // ❌ Not needed
31import '@unocss/reset/tailwind-compat.css' // ❌ Not needed
32 
33// Enable in config
34presetWind4({
35  preflights: {
36    reset: true,
37  },
38})
39```
40 
41### OKLCH Color Model
42 
43Uses `oklch` for better color perception and contrast. Not compatible with `presetLegacyCompat`.
44 
45### Theme CSS Variables
46 
47Automatically generates CSS variables from theme:
48 
49```css
50:root, :host {
51  --spacing: 0.25rem;
52  --font-sans: ui-sans-serif, system-ui, sans-serif;
53  --colors-black: #000;
54  --colors-white: #fff;
55  /* ... */
56}
57```
58 
59### @property CSS Rules
60 
61Uses `@property` for better browser optimization:
62 
63```css
64@property --un-text-opacity {
65  syntax: '<percentage>';
66  inherits: false;
67  initial-value: 100%;
68}
69```
70 
71### Theme Key Changes
72 
73| preset-wind3 | preset-wind4 |
74|--------------|--------------|
75| `fontFamily` | `font` |
76| `fontSize` | `text.fontSize` |
77| `lineHeight` | `text.lineHeight` or `leading` |
78| `letterSpacing` | `text.letterSpacing` or `tracking` |
79| `borderRadius` | `radius` |
80| `easing` | `ease` |
81| `breakpoints` | `breakpoint` |
82| `verticalBreakpoints` | `verticalBreakpoint` |
83| `boxShadow` | `shadow` |
84| `transitionProperty` | `property` |
85| `container.maxWidth` | `containers.maxWidth` |
86| Size properties (`width`, `height`, etc.) | Unified to `spacing` |
87 
88## Options
89 
90```ts
91presetWind4({
92  preflights: {
93    // Built-in reset styles
94    reset: true,
95    
96    // Theme CSS variables generation
97    theme: 'on-demand', // true | false | 'on-demand'
98    
99    // @property CSS rules
100    property: true,
101  },
102})
103```
104 
105### Theme Variable Processing
106 
107Convert rem to px for theme variables:
108 
109```ts
110import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
111 
112presetWind4({
113  preflights: {
114    theme: {
115      mode: 'on-demand',
116      process: createRemToPxProcessor(),
117    }
118  },
119})
120 
121// Also apply to utilities
122export default defineConfig({
123  postprocess: [createRemToPxProcessor()],
124})
125```
126 
127### Property Layer Customization
128 
129```ts
130presetWind4({
131  preflights: {
132    property: {
133      // Custom parent wrapper
134      parent: '@layer custom-properties',
135      // Custom selector
136      selector: ':where(*, ::before, ::after)',
137    },
138  },
139})
140```
141 
142Remove `@supports` wrapper:
143 
144```ts
145presetWind4({
146  preflights: {
147    property: {
148      parent: false,
149    },
150  },
151})
152```
153 
154## Generated Layers
155 
156| Layer | Description | Order |
157|-------|-------------|-------|
158| `properties` | CSS `@property` rules | -200 |
159| `theme` | Theme CSS variables | -150 |
160| `base` | Reset/preflight styles | -100 |
161 
162## Theme.defaults
163 
164Global default configuration for reset styles:
165 
166```ts
167import type { Theme } from '@unocss/preset-wind4/theme'
168 
169const defaults: Theme['default'] = {
170  transition: {
171    duration: '150ms',
172    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
173  },
174  font: {
175    family: 'var(--font-sans)',
176    featureSettings: 'var(--font-sans--font-feature-settings)',
177    variationSettings: 'var(--font-sans--font-variation-settings)',
178  },
179  monoFont: {
180    family: 'var(--font-mono)',
181    // ...
182  },
183}
184```
185 
186## Compatibility Notes
187 
188### presetRemToPx
189 
190Not needed - use built-in processor instead:
191 
192```ts
193presetWind4({
194  preflights: {
195    theme: {
196      process: createRemToPxProcessor(),
197    }
198  },
199})
200```
201 
202### presetLegacyCompat
203 
204**Not compatible** with preset-wind4 due to `oklch` color model.
205 
206## Migration from Wind3
207 
2081. Update theme keys according to the table above
2092. Remove `@unocss/reset` imports
2103. Enable `preflights.reset: true`
2114. Test color outputs (oklch vs rgb)
2125. Update any custom theme extensions
213 
214```ts
215// Before (wind3)
216theme: {
217  fontFamily: { sans: 'Roboto' },
218  fontSize: { lg: '1.125rem' },
219  breakpoints: { sm: '640px' },
220}
221 
222// After (wind4)
223theme: {
224  font: { sans: 'Roboto' },
225  text: { lg: { fontSize: '1.125rem' } },
226  breakpoint: { sm: '640px' },
227}
228```
229 
230## When to Use Wind4
231 
232Choose **preset-wind4** when:
233- Starting a new project
234- Targeting modern browsers
235- Want built-in reset and CSS variables
236- Following Tailwind v4 conventions
237 
238Choose **preset-wind3** when:
239- Need legacy browser support
240- Migrating from Tailwind v3
241- Using presetLegacyCompat
242- Want stable, proven preset
243 
244<!-- 
245Source references:
246- https://unocss.dev/presets/wind4
247-->
248