Wind4 preset

Tailwind4 CSS kompakt preset för UnoCSS. Den är kompatibel med alla funktioner i PresetWind3 och förbättrar den ytterligare.

Källkod

TIP

Du kan lägga lite tid på att läsa detta dokument för att förstå ändringarna

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

Kompatibilitet

Se Tailwind Compatibility för att lära dig om webbläsarstöd och kompatibilitet.

Tema

PresetWind4😒 tema är nästan identiskt med PresetWind3😒 tema, men vissa temanycklar har justerats.

WARNING

Vänligen notera vid växling till PresetWind4, se tabellen nedan för att kontrollera din temanyckelkonfiguration och göra lämpliga justeringar.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Flyttad till fontSize-egenskap i text
lineHeight	Flyttad till lineHeight-egenskap i text eller använd leading
letterSpacing	Flyttad till letterSpacing-egenskap i text eller använd tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Storleksegenskaper som width, height, maxWidth, maxHeight, minWidth, minHeight	Använd enhetligt spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults är en global standardtemakonfiguration som kommer att tillämpas på reset-stilar eller användas som standardvärden för vissa regler.

Nedan är standardvärdena för Theme.defaults, som du kan åsidosätta i din temakonfiguration.

Klicka för att visa standardvärden

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

Alternativ

PresetWind4:s grundkonfiguration liknar PresetWind3, med följande viktiga ändringar.

Reset-stilar

I PresetWind4 anpassar vi reset-stilarna till tailwind4 och integrerar dem internt. Du behöver inte installera något ytterligare CSS-reset-paket som @unocss/reset eller normalize.css.

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

Du behöver bara kontrollera om du vill aktivera reset-stilar genom en växling:

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

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

Utility Resolver

I PresetWind4 har vi uppgraderat postProcess-hook för att tillhandahålla ett mer koncist API. Du kan nu direkt anpassa utilities i preset.

Till exempel, om du vill använda presetRemToPx-preset för att konvertera rem till px, behöver du inte längre importera denna preset separat eftersom presetWind4 tillhandahåller denna funktion internt.

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

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

Du kan anpassa fler resolver-uppsättningar för att bearbeta utilities och mata ut den CSS du vill ha.

För specifik implementering, se postProcess eller presetWind4 testfallet

Tema Preflight

Välj hur CSS-variabler för temat ska genereras.

UnoCSS-motorn med presetWind4 installerad kommer automatiskt att samla in beroenden på temat vid parsning av utilities och generera CSS-variabler i slutet.

• true: Generera temanycklar fullständigt.
• false: Inaktivera temanycklar. (Rekommenderas inte ⚠️)
• 'on-demand': Generera temanycklar endast vid användning. -> ✅ (Som standard)

Genererad CSS

I utdata från PresetWind4 har två nya lager lagts till: theme och cssvar-property.

Lagernamn	Beskrivning	ordning
cssvar-property	CSS-egenskaper definierade av @property	-200
theme	Tema-relaterade CSS-variabler	-150

cssvar-property-lager

Vi har använt @property för att definiera CSS-egenskaper i många regler för att uppnå bättre prestanda och mindre storlek.

Till exempel vanliga verktyg som text-op-xx, bg-op-xx, och så vidare.

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

theme-lager

Vi har placerat tema-relaterade CSS-variabler i theme-lagret för att göra det lättare för dig att åsidosätta och använda direkt. Det kan vara omfattande eller på begäran. Det kommer alltid från din temakonfiguration.

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

Kompatibilitet med andra presets

PresetWind4 förbättrar och är kompatibel med PresetWind3. Eftersom andra paket ursprungligen utvecklades för PresetWind3, kan vissa problem uppstå vid användning tillsammans. Kända problem inkluderar:

presetWebFonts

Vid användning av presetWebFonts med PresetWind4, stöds inte temanyckeln fontFamily längre. Gör följande justering:

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

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

presetLegacyCompat

I presetWind4 använder vi oklch-färgmodellen för att stödja bättre färgkontrast och färguppfattning. Därför är den inte kompatibel med presetLegacyCompat och rekommenderas inte för användning tillsammans.

Se avsnittet Kompatibilitet för mer information.

transformDirectives

transformDirectives fungerar inte bra med PresetWind4. Det finns vissa kända problem, så använd det med försiktighet.

WARNING

• Vid användning av @apply för att bearbeta regler som har @property, kan konflikter uppstå mellan olika lagernivåer.