Wind4 preset

Tailwind4 CSS kompaktný preset pre UnoCSS. Je kompatibilný so všetkými funkciami PresetWind3 a ďalej ich vylepšuje.

Zdrojový kód

TIP

Strávte trochu času čítaním tohto dokumentu na pochopenie zmien

Inštalácia

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

Kompatibilita

Pozrite si Tailwind Compatibility a dozviete sa o podpore prehliadačov a kompatibilite.

Téma

Téma PresetWind4 je takmer identická s témou PresetWind3, ale niektoré kľúče témy boli upravené.

WARNING

Pri prepínaní na PresetWind4 si pozrite tabuľku nižšie na kontrolu vašej konfigurácie kľúčov témy a vykonajte príslušné úpravy.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Presunuté na vlastnosť fontSize v text
lineHeight	Presunuté na vlastnosť lineHeight v text alebo použite leading
letterSpacing	Presunuté na vlastnosť letterSpacing v text alebo použite tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Vlastnosti veľkosti ako width, height, maxWidth, maxHeight, minWidth, minHeight	Zjednotené na použitie spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults je globálna predvolená konfigurácia témy, ktorá bude aplikovaná na štýly reset alebo použitá ako predvolené hodnoty pre určité pravidlá.

Nižšie sú uvedené predvolené hodnoty pre Theme.defaults, ktoré môžete prepísať vo vašej konfigurácii témy.

Kliknite na zobrazenie predvolených hodnôt

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

Možnosti

Základná konfigurácia PresetWind4 je podobná PresetWind3, s nasledujúcimi dôležitými zmenami.

Reset štýly

V PresetWind4 sme zosúladili reset štýly s tailwind4 a interne ich integrovali. Nepotrebujete inštalovať žiadny ďalší balík CSS reset ako @unocss/reset alebo normalize.css.

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

Stačí ovládať, či povoliť reset štýly pomocou prepínača:

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

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

Utility Resolver

V PresetWind4 sme vylepšili hook postProcess na poskytnutie stručnejšieho API. Teraz môžete priamo prispôsobiť utilities v presete.

Napríklad, ak chcete použiť preset presetRemToPx na konverziu rem na px, už nemusíte tento preset importovať samostatne, keďže presetWind4 poskytuje túto funkciu interne.

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

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

Môžete prispôsobiť viac sád resolverov na spracovanie utilities a výstup CSS, ktoré chcete.

Pre konkrétnu implementáciu si pozrite postProcess alebo testovací prípad presetWind4

Theme Preflight

Vyberte spôsob generovania CSS premenných témy.

Engine UnoCSS s nainštalovaným presetWind4 bude automaticky zbierať závislosti na téme pri parsingu utilít a generovať CSS premenné na konci.

• true: Generovať kľúče témy úplne.
• false: Zakázať kľúče témy. (Neodporúča sa ⚠️)
• 'on-demand': Generovať kľúče témy iba pri použití. -> ✅ (Predvolené)

Generované CSS

Vo výstupe PresetWind4 boli pridané dve nové vrstvy: theme a cssvar-property.

Názov vrstvy	Popis	poradie
cssvar-property	CSS vlastnosti definované pomocou @property	-200
theme	Premenné CSS súvisiace s témou	-150

Vrstva cssvar-property

Použili sme @property na definovanie CSS vlastností v mnohých pravidlách na dosiahnutie lepšieho výkonu a menšej veľkosti.

Napríklad bežne používané utility ako text-op-xx, bg-op-xx a tak ďalej.

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

Vrstva theme

Umiestnili sme premenné CSS súvisiace s témou do vrstvy theme, aby sme vám uľahčili prepísanie a priame použitie. Môže byť komplexná alebo na požiadanie. Vždy pochádza z vašej konfigurácie témy.

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

Kompatibilita s inými presetmi

PresetWind4 vylepšuje a je kompatibilný s PresetWind3. Keďže ostatné balíky boli pôvodne vyvinuté pre PresetWind3, pri ich spoločnom používaní môžu vzniknúť niektoré problémy. Známe problémy zahŕňajú:

presetWebFonts

Pri používaní presetWebFonts s PresetWind4 už kľúč témy fontFamily nie je podporovaný. Vykonajte nasledujúcu úpravu:

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

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

presetLegacyCompat

V presetWind4 používame farebný model oklch na podporu lepšieho farebného kontrastu a vnímania farieb. Preto nie je kompatibilný s presetLegacyCompat a neodporúča sa používať ich spolu.

Ďalšie informácie nájdete v časti Kompatibilita.

transformDirectives

transformDirectives nefunguje dobre s PresetWind4. Existujú niektoré známe problémy, preto ho používajte opatrne.

WARNING

• Pri používaní @apply na spracovanie pravidiel, ktoré majú @property, môžu nastať konflikty medzi rôznymi úrovňami vrstiev.