Preset Wind4

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

Installation

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:

// 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

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:

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

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

Remove @supports wrapper:

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:

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:

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

presetLegacyCompat

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

Migration from Wind3

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

// 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