Wind4 prednastavitev

Kompaktna prednastavitev Tailwind4 CSS za UnoCSS. Združljiva je z vsemi funkcijami PresetWind3 in jih še izboljšuje.

Izvorna koda

TIP

Namnite si malo časa za branje tega dokumenta za razumevanje sprememb

Namestitev

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

Združljivost

Za več informacij o podpori brskalnikom in združljivosti si oglejte Tailwind Compatibility.

Tema

Tema PresetWind4 je skoraj identična temi PresetWind3, vendar so bile nekatere ključe teme prilagojene.

WARNING

Prosimo, upoštevajte pri prehodu na PresetWind4, spodnjo tabelo za preverjanje konfiguracije ključev vaše teme in ustrezne prilagoditve.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Premaknjeno na lastnost fontSize v text
lineHeight	Premaknjeno na lastnost lineHeight v text ali uporabite leading
letterSpacing	Premaknjeno na lastnost letterSpacing v text ali uporabite tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Lastnosti velikosti kot width, height, maxWidth, maxHeight, minWidth, minHeight	Poenoteno z uporabo spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults je globalna privzeta konfiguracija teme, ki bo uporabljena za sloge reset ali uporabljena kot privzete vrednosti za določena pravila.

Spodaj so privzete vrednosti za Theme.defaults, ki jih lahko prepišete v vaši konfiguraciji teme.

Kliknite za ogled privzetih vrednosti

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

Osnovna konfiguracija PresetWind4 je podobna PresetWind3, z naslednjimi pomembnimi spremembami.

Slogi ponastavitve

V PresetWind4 uskladimo sloge ponastavitve s tailwind4 in jih integriramo interno. Ni vam treba namestiti nobenega dodatnega paketa CSS reset, kot je @unocss/reset ali normalize.css.

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

Samo nadzorovati morate, ali omogočite sloge ponastavitve prek stikala:

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

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

Utility Resolver

V PresetWind4 smo nadgradili hook postProcess za zagotavljanje bolj jedrnatega API. Zdaj lahko neposredno prilagodite utilities v prednastavitvi.

Na primer, če želite uporabiti prednastavitev presetRemToPx za pretvorbo rem v px, vam ni treba več uvoziti te prednastavitve posebej, saj presetWind4 to funkcionalnost zagotavlja interno.

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

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

Prilagodite lahko več nizov resolverjev za obdelavo utilities in izpis CSS, ki ga želite.

Za specifične implementacijske metode si oglejte postProcess ali testni primer presetWind4

Theme Preflight

Izberite način generiranja CSS spremenljivk teme.

UnoCSS motor z nameščenim presetWind4 bo samodejno zbral odvisnosti teme pri parsiranju pripomočkov in generiral CSS spremenljivke na koncu.

• true: Generiraj ključe teme v celoti.
• false: Onemogoči ključe teme. (Ni priporočeno ⚠️)
• 'on-demand': Generiraj ključe teme le, ko so uporabljeni. -> ✅ (Privzeto)

Generirani CSS

V izpisu PresetWind4 sta dodana dva nova sloja: theme in cssvar-property.

Ime sloja	Opis	Vrstni red
cssvar-property	CSS lastnosti, definirane z @property	-200
theme	CSS spremenljivke, povezane s temo	-150

Sloj cssvar-property

Uporabili smo @property za definiranje CSS lastnosti v mnogih pravilih za doseganje boljših zmogljivosti in manjše velikosti.

Na primer, pogosto uporabljeni pripomočki, kot so text-op-xx, bg-op-xx in tako naprej.

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

Sloj theme

Postavili smo CSS spremenljivke, povezane s temo, v sloj theme, da vam olajšamo prepisovanje in neposredno uporabo. Lahko je celovito ali na zahtevo. Vedno izvira iz vaše konfiguracije teme.

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

Združljivost z drugimi prednastavitvami

PresetWind4 izboljšuje in je združljiv s PresetWind3. Ker so bili drugi paketi prvotno razviti za PresetWind3, se lahko pojavijo nekatere težave pri skupni uporabi. Znane težave vključujejo:

presetWebFonts

Pri uporabi presetWebFonts s PresetWind4, ključ teme fontFamily ni več podprt. Prosimo, naredite naslednjo prilagoditev:

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

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

presetLegacyCompat

V presetWind4 uporabljamo barvni model oklch za podporo boljšemu barvnemu kontrastu in barvnemu zaznavanju. Zato ni združljiv s presetLegacyCompat in ni priporočljivo za skupno uporabo.

Za več informacij si oglejte razdelek Združljivost.

transformDirectives

transformDirectives ne deluje dobro s PresetWind4. Obstajajo nekatere znane težave, zato ga uporabljajte previdno.

WARNING

• Pri uporabi @apply za obdelavo pravil, ki imajo @property, se lahko pojavijo konflikti med različnimi nivoji slojev.