Wind4 Preset

Das Tailwind4 CSS kompakte Preset für UnoCSS. Es ist kompatibel mit allen Funktionen von PresetWind3 und erweitert es weiter.

Quellcode

TIP

Sie können etwas Zeit damit verbringen, dieses Dokument zu lesen, um die Änderungen zu verstehen

Installation

pnpm

pnpm add -D @unocss/preset-wind4

yarn

yarn add -D @unocss/preset-wind4

npm

npm install -D @unocss/preset-wind4

bun

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

Kompatibilität

Beziehen Sie sich auf Tailwind Kompatibilität, um mehr über Browser-Unterstützung und Kompatibilität zu erfahren.

Theme

Das Theme von PresetWind4 ist fast identisch mit dem Theme von PresetWind3, aber einige Theme-Schlüssel wurden angepasst.

WARNING

Bitte beachten Sie beim Wechsel zu PresetWind4 die folgende Tabelle, um Ihre Theme-Schlüssel-Konfiguration zu überprüfen und entsprechende Anpassungen vorzunehmen.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Moved to fontSize property in text
lineHeight	Moved to lineHeight property in text or use leading
letterSpacing	Moved to letterSpacing property in text or use tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Size properties like width, height, maxWidth, maxHeight, minWidth, minHeight	Unified to use spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults ist eine globale Standard-Theme-Konfiguration, die auf reset Styles angewendet wird oder als Standardwerte für bestimmte Regeln verwendet wird.

Unten sind die Standardwerte für Theme.defaults, die Sie in Ihrer Theme-Konfiguration überschreiben können.

Klicken Sie, um Standardwerte anzuzeigen

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

export const defaults: Theme['defaults'] = {
  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)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

Optionen

Die grundlegende Konfiguration von PresetWind4 ist ähnlich wie PresetWind3, mit den folgenden wichtigen Änderungen.

Reset Styles

In PresetWind4 richten wir die Reset Styles mit tailwind4 aus und integrieren sie intern. Sie müssen kein zusätzliches CSS-Reset-Paket wie @unocss/reset oder normalize.css installieren.

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

Sie müssen nur steuern, ob Reset Styles über einen Schalter aktiviert werden sollen:

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      reset: true, 
      // ^?
    }),
  ],
})

Utility Resolver

In PresetWind4 haben wir den postProcess Hook aktualisiert, um eine prägnantere API bereitzustellen. Sie können jetzt direkt utilities im Preset anpassen.

Zum Beispiel, wenn Sie das presetRemToPx Preset verwenden möchten, um rem in px umzuwandeln, müssen Sie dieses Preset nicht mehr separat importieren, da presetWind4 diese Funktionalität intern bereitstellt.

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

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

Sie können weitere Resolver-Sets anpassen, um utilities zu verarbeiten und das gewünschte CSS auszugeben.

Für spezifische Implementierungsmethoden beziehen Sie sich bitte auf postProcess oder den presetWind4 Testfall

Theme Preflight

Wählen Sie, wie Theme CSS-Variablen generiert werden sollen.

Die UnoCSS-Engine mit installiertem presetWind4 sammelt automatisch Abhängigkeiten vom Theme beim Parsen von Utilities und generiert CSS-Variablen am Ende.

• true: Generiert Theme-Schlüssel vollständig.
• false: Deaktiviert Theme-Schlüssel. (Nicht empfohlen ⚠️)
• 'on-demand': Generiert Theme-Schlüssel nur bei Verwendung. -> ✅ (Standardmäßig)

Generiertes CSS

In der Ausgabe von PresetWind4 wurden zwei neue Ebenen hinzugefügt: theme und cssvar-property.

Layer Name	Beschreibung	order
cssvar-property	CSS-Eigenschaften definiert durch @property	-200
theme	Theme-bezogene CSS-Variablen	-150

cssvar-property Ebene

Wir haben @property verwendet, um CSS-Eigenschaften in vielen Regeln zu definieren, um bessere Leistung und kleinere Größe zu erreichen.

Zum Beispiel häufig verwendete Utilities wie text-op-xx, bg-op-xx und so weiter.

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

theme Ebene

Wir haben Theme-bezogene CSS-Variablen in der theme Ebene platziert, um es Ihnen zu erleichtern, sie zu überschreiben und direkt zu verwenden. Es kann umfassend oder on-demand sein. Es kommt immer aus Ihrer Theme-Konfiguration.

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

Kompatibilität mit anderen Presets

PresetWind4 erweitert und ist kompatibel mit PresetWind3. Da andere Pakete ursprünglich für PresetWind3 entwickelt wurden, können einige Probleme auftreten, wenn sie zusammen verwendet werden. Bekannte Probleme umfassen:

presetWebFonts

Wenn Sie presetWebFonts mit PresetWind4 verwenden, wird der fontFamily Theme-Schlüssel nicht mehr unterstützt. Bitte nehmen Sie die folgende Anpassung vor:

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetWebFonts({
      themeKey: 'font', 
      // ^?
    }),
  ],
})

presetLegacyCompat

In presetWind4 verwenden wir das oklch Farbmodell, um besseren Farbkontrast und Farbwahrnehmung zu unterstützen. Daher ist es nicht kompatibel mit presetLegacyCompat und wird nicht empfohlen, zusammen verwendet zu werden.

Bitte beziehen Sie sich auf den Abschnitt Kompatibilität für weitere Informationen.

transformDirectives

transformDirectives funktioniert nicht gut mit PresetWind4. Es gibt einige bekannte Probleme, daher verwenden Sie es bitte mit Vorsicht.

WARNING

• Bei Verwendung von @apply zum Verarbeiten von Regeln, die @property haben, können Konflikte zwischen verschiedenen Ebenen auftreten.