agent-skills/skills/unocss/references/preset-wind4.md

name, description

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

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

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

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