Preset Wind4

Il preset compatto Tailwind4 CSS per UnoCSS. È compatibile con tutte le funzionalità di PresetWind3 e lo migliora ulteriormente.

Codice Sorgente

TIP

Puoi dedicare un po' di tempo a leggere questo documento per comprendere le modifiche

Installazione

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(),
    //  ^?
  ],
})

Compatibilità

Fai riferimento a Compatibilità Tailwind per saperne di più sul supporto del browser e la compatibilità.

Tema

Il tema di PresetWind4 è quasi identico al tema di PresetWind3, ma alcune chiavi del tema sono state modificate.

WARNING

Nota quando passi a PresetWind4, fai riferimento alla tabella seguente per controllare la configurazione delle chiavi del tema e apportare le modifiche appropriate.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Spostato alla proprietà fontSize in text
lineHeight	Spostato alla proprietà lineHeight in text o usa leading
letterSpacing	Spostato alla proprietà letterSpacing in text o usa tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Proprietà di dimensione come width, height, maxWidth, maxHeight, minWidth, minHeight	Unificate per usare spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults è una configurazione del tema predefinito globale che verrà applicata agli stili reset o utilizzata come valori predefiniti per determinate regole.

Di seguito sono riportati i valori predefiniti per Theme.defaults, che puoi sovrascrivere nella tua configurazione del tema.

Clicca per visualizzare i valori predefiniti

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)',
  },
}

Opzioni

La configurazione di base di PresetWind4 è simile a PresetWind3, con le seguenti modifiche importanti.

Reset Stili

In PresetWind4, allineiamo gli stili di reset con tailwind4 e li integriamo internamente. Non è necessario installare alcun pacchetto CSS reset aggiuntivo come @unocss/reset o normalize.css.

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

Devi solo controllare se abilitare gli stili di reset tramite un interruttore:

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

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

Utility Resolver

In PresetWind4, abbiamo aggiornato l'hook postProcess per fornire un'API più concisa. Ora puoi personalizzare direttamente utilities nel preset.

Ad esempio, se vuoi usare il preset presetRemToPx per convertire rem in px, non è più necessario importare questo preset separatamente poiché presetWind4 fornisce questa funzionalità internamente.

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

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

Puoi personalizzare più set di resolver per elaborare utilities e produrre il CSS che desideri.

Per metodi di implementazione specifici, fai riferimento a postProcess o al caso di test presetWind4

Theme Preflight

Scegli come generare le variabili CSS del tema.

Il motore UnoCSS con presetWind4 installato raccoglierà automaticamente le dipendenze dal tema durante l'analisi delle utility e genererà le variabili CSS alla fine.

• true: Genera completamente le chiavi del tema.
• false: Disabilita le chiavi del tema. (Non raccomandato ⚠️)
• 'on-demand': Genera le chiavi del tema solo quando vengono utilizzate. -> ✅ (Per impostazione predefinita)

CSS Generato

Nell'output di PresetWind4, sono state aggiunte due nuove layer: theme e cssvar-property.

Nome Layer	Descrizione	order
cssvar-property	Proprietà CSS definite da @property	-200
theme	Variabili CSS relative al tema	-150

Layer cssvar-property

Abbiamo usato @property per definire proprietà CSS in molte regole per ottenere prestazioni migliori e dimensioni più piccole.

Ad esempio, utility comunemente usate come text-op-xx, bg-op-xx e così via.

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

Layer theme

Abbiamo posizionato le variabili CSS relative al tema nel layer theme per facilitare la sovrascrittura e l'uso diretto. Può essere completo o on-demand. Proviene sempre dalla tua configurazione del tema.

: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;
  /* ... */
}

Compatibilità con Altri Preset

PresetWind4 migliora ed è compatibile con PresetWind3. Poiché altri pacchetti sono stati originariamente sviluppati per PresetWind3, potrebbero sorgere alcuni problemi quando vengono usati insieme. I problemi noti includono:

presetWebFonts

Quando usi presetWebFonts con PresetWind4, la chiave del tema fontFamily non è più supportata. Apporta la seguente modifica:

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

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

presetLegacyCompat

In presetWind4, usiamo il modello di colore oklch per supportare un migliore contrasto dei colori e la percezione dei colori. Pertanto, non è compatibile con presetLegacyCompat e non è raccomandato l'uso insieme.

Fai riferimento alla sezione Compatibilità per maggiori informazioni.

transformDirectives

transformDirectives non funziona bene con PresetWind4. Ci sono alcuni problemi noti, quindi usalo con cautela.

WARNING

• Quando usi @apply per elaborare regole che hanno @property, possono verificarsi conflitti tra diversi livelli di layer.