/unocss

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:

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

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

Theme Key Changes

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

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

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

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