Preset Wind4

Le preset compact Tailwind4 CSS pour UnoCSS. Il est compatible avec toutes les fonctionnalités de PresetWind3 et l'améliore davantage.

Code Source

TIP

Vous pouvez passer un peu de temps à lire ce document pour comprendre les changements

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

Compatibilité

Référez-vous à Tailwind Compatibility pour en apprendre sur le support des navigateurs et la compatibilité.

Thème

Le thème de PresetWind4 est presque identique au thème de PresetWind3, mais certaines clés de thème ont été ajustées.

WARNING

Veuillez noter lors du passage à PresetWind4, référez-vous au tableau ci-dessous pour vérifier votre configuration de clé de thème et faire les ajustements appropriés.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Déplacé vers la propriété fontSize dans text
lineHeight	Déplacé vers la propriété lineHeight dans text ou utiliser leading
letterSpacing	Déplacé vers la propriété letterSpacing dans text ou utiliser tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Propriétés de taille comme width, height, maxWidth, maxHeight, minWidth, minHeight	Unifiées pour utiliser spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults est une configuration de thème par défaut globale qui sera appliquée aux styles reset ou utilisée comme valeurs par défaut pour certaines règles.

Ci-dessous sont les valeurs par défaut pour Theme.defaults, que vous pouvez remplacer dans votre configuration de thème.

Cliquez pour voir les valeurs par défaut

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

Options

La configuration de base de PresetWind4 est similaire à PresetWind3, avec les changements importants suivants.

Styles Reset

Dans PresetWind4, nous alignons les styles reset avec tailwind4 et les intégrons en interne. Vous n'avez pas besoin d'installer de package CSS reset supplémentaire comme @unocss/reset ou normalize.css.

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

Vous devez seulement contrôler si activer les styles reset à travers un interrupteur :

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

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

Résolveur d'utilitaires

Dans PresetWind4, nous avons amélioré le hook postProcess pour fournir une API plus concise. Vous pouvez maintenant personnaliser directement utilities dans le preset.

Par exemple, si vous voulez utiliser le preset presetRemToPx pour convertir rem en px, vous n'avez plus besoin d'importer ce preset séparément car presetWind4 fournit cette fonctionnalité en interne.

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

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

Vous pouvez personnaliser plus d'ensembles de résolveurs pour traiter utilities et produire le CSS que vous voulez.

Pour les méthodes d'implémentation spécifiques, veuillez vous référer à postProcess ou au cas de test presetWind4

Preflight de thème

Choisissez comment générer les variables CSS de thème.

Le moteur UnoCSS avec presetWind4 installé collectera automatiquement les dépendances sur le thème lors de l'analyse des utilitaires et générera les variables CSS à la fin.

• true: Générer complètement les clés de thème.
• false: Désactiver les clés de thème. (Non recommandé ⚠️)
• 'on-demand': Générer les clés de thème seulement quand utilisées. -> ✅ (Par défaut)

CSS généré

Dans la sortie de PresetWind4, deux nouvelles couches ont été ajoutées : theme et cssvar-property.

Nom de couche	Description	ordre
cssvar-property	Propriétés CSS définies par @property	-200
theme	Variables CSS liées au thème	-150

Couche cssvar-property

Nous avons utilisé @property pour définir des propriétés CSS dans de nombreuses règles pour atteindre une meilleure performance et une taille plus petite.

Par exemple, les utilitaires couramment utilisés comme text-op-xx, bg-op-xx, et ainsi de suite.

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

Couche theme

Nous avons placé les variables CSS liées au thème dans la couche theme pour vous faciliter la surcharge et l'utilisation directe. Elle peut être complète ou à la demande. Elle vient toujours de votre configuration de thème.

: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é avec d'autres presets

PresetWind4 améliore et est compatible avec PresetWind3. Puisque d'autres packages ont été développés à l'origine pour PresetWind3, certains problèmes peuvent survenir lors de leur utilisation ensemble. Les problèmes connus incluent :

presetWebFonts

Lors de l'utilisation de presetWebFonts avec PresetWind4, la clé de thème fontFamily n'est plus supportée. Veuillez faire l'ajustement suivant :

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

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

presetLegacyCompat

Dans presetWind4, nous utilisons le modèle de couleur oklch pour supporter un meilleur contraste de couleur et une meilleure perception des couleurs. Par conséquent, il n'est pas compatible avec presetLegacyCompat et n'est pas recommandé pour une utilisation ensemble.

Veuillez vous référer à la section Compatibilité pour plus d'informations.

transformDirectives

transformDirectives ne fonctionne pas bien avec PresetWind4. Il y a quelques problèmes connus, donc veuillez l'utiliser avec précaution.

WARNING

• Lors de l'utilisation de @apply pour traiter des règles qui ont @property, des conflits peuvent survenir entre différents niveaux de couches.