248 lines
4.6 KiB
Markdown
248 lines
4.6 KiB
Markdown
---
|
|
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
|
|
-->
|