---
name: preset-wind4
description: Tailwind CSS v4 compatible preset with enhanced features
---

# Preset Wind4

The Tailwind CSS v4 compatible preset. Enhances preset-wind3 with modern CSS features.

## Installation

```ts
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
  ],
})
```

## Key Differences from Wind3

### Built-in CSS Reset

No need for `@unocss/reset` - reset is built-in:

```ts
// Remove these imports
import '@unocss/reset/tailwind.css' // ❌ Not needed
import '@unocss/reset/tailwind-compat.css' // ❌ Not needed

// Enable in config
presetWind4({
  preflights: {
    reset: true,
  },
})
```

### OKLCH Color Model

Uses `oklch` for better color perception and contrast. Not compatible with `presetLegacyCompat`.

### Theme CSS Variables

Automatically generates CSS variables from theme:

```css
:root, :host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}
```

### @property CSS Rules

Uses `@property` for better browser optimization:

```css
@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
```

### Theme Key Changes

| preset-wind3 | preset-wind4 |
|--------------|--------------|
| `fontFamily` | `font` |
| `fontSize` | `text.fontSize` |
| `lineHeight` | `text.lineHeight` or `leading` |
| `letterSpacing` | `text.letterSpacing` or `tracking` |
| `borderRadius` | `radius` |
| `easing` | `ease` |
| `breakpoints` | `breakpoint` |
| `verticalBreakpoints` | `verticalBreakpoint` |
| `boxShadow` | `shadow` |
| `transitionProperty` | `property` |
| `container.maxWidth` | `containers.maxWidth` |
| Size properties (`width`, `height`, etc.) | Unified to `spacing` |

## Options

```ts
presetWind4({
  preflights: {
    // Built-in reset styles
    reset: true,
    
    // Theme CSS variables generation
    theme: 'on-demand', // true | false | 'on-demand'
    
    // @property CSS rules
    property: true,
  },
})
```

### Theme Variable Processing

Convert rem to px for theme variables:

```ts
import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'

presetWind4({
  preflights: {
    theme: {
      mode: 'on-demand',
      process: createRemToPxProcessor(),
    }
  },
})

// Also apply to utilities
export default defineConfig({
  postprocess: [createRemToPxProcessor()],
})
```

### Property Layer Customization

```ts
presetWind4({
  preflights: {
    property: {
      // Custom parent wrapper
      parent: '@layer custom-properties',
      // Custom selector
      selector: ':where(*, ::before, ::after)',
    },
  },
})
```

Remove `@supports` wrapper:

```ts
presetWind4({
  preflights: {
    property: {
      parent: false,
    },
  },
})
```

## Generated Layers

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

## Theme.defaults

Global default configuration for reset styles:

```ts
import type { Theme } from '@unocss/preset-wind4/theme'

const defaults: Theme['default'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    // ...
  },
}
```

## Compatibility Notes

### presetRemToPx

Not needed - use built-in processor instead:

```ts
presetWind4({
  preflights: {
    theme: {
      process: createRemToPxProcessor(),
    }
  },
})
```

### presetLegacyCompat

**Not compatible** with preset-wind4 due to `oklch` color model.

## Migration from Wind3

1. Update theme keys according to the table above
2. Remove `@unocss/reset` imports
3. Enable `preflights.reset: true`
4. Test color outputs (oklch vs rgb)
5. Update any custom theme extensions

```ts
// Before (wind3)
theme: {
  fontFamily: { sans: 'Roboto' },
  fontSize: { lg: '1.125rem' },
  breakpoints: { sm: '640px' },
}

// After (wind4)
theme: {
  font: { sans: 'Roboto' },
  text: { lg: { fontSize: '1.125rem' } },
  breakpoint: { sm: '640px' },
}
```

## When to Use Wind4

Choose **preset-wind4** when:
- Starting a new project
- Targeting modern browsers
- Want built-in reset and CSS variables
- Following Tailwind v4 conventions

Choose **preset-wind3** when:
- Need legacy browser support
- Migrating from Tailwind v3
- Using presetLegacyCompat
- Want stable, proven preset

<!-- 
Source references:
- https://unocss.dev/presets/wind4
-->