Preset Wind3

Le preset compact Tailwind CSS / Windi CSS pour UnoCSS.

Code Source

INFO

@unocss/preset-wind et @unocss/preset-uno sont dépréciés et renommés en @unocss/preset-wind3. Ce preset hérite de @unocss/preset-mini.

Installation

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { presetWind3 } from 'unocss'

Règles

L'objectif principal de ce preset est de fournir la compatibilité avec Tailwind CSS et Windi CSS. Il faut noter que la compatibilité complète peut ne pas être garantie. Veuillez vous référer à leur documentation pour l'utilisation détaillée.

Pour toutes les règles et presets inclus dans ce preset, veuillez vous référer à notre documentation interactive ou aller directement au code source.

Fonctionnalités

Mode sombre

Par défaut, ce preset génère un mode sombre basé sur les classes avec la variante dark:.

<div class="dark:bg-red:10" />

générera :

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

Mode sombre basé sur media query

Pour utiliser un mode sombre basé sur media query globalement, vous pouvez changer la config pour la variante dark: :

presetWind3({
  dark: 'media'
})

Maintenant

<div class="dark:bg-red:10" />

générera :

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

Mode sombre basé sur media query opt-in

Pour utiliser le mode sombre basé sur media query opt-in, vous pouvez utiliser la variante @dark: :

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

Différences avec Tailwind CSS

Guillemets

L'utilisation de guillemets dans le template (les fichiers destinés à être traités) n'est pas supportée à cause de la façon dont l'extracteur fonctionne. Par exemple, vous ne pourrez pas écrire before:content-['']. Pour ces cas, vous pouvez préférer introduire un nouvel utilitaire que vous pouvez définir explicitement comme class="before:content-empty".

background-position avec des valeurs arbitraires

Tailwind permet d'utiliser des valeurs personnalisées pour background-position en utilisant la syntaxe nue :

<div class="bg-[center_top_1rem]"></div>

Le preset Wind interprétera plutôt center_top_1rem comme une couleur. Utilisez un préfixe position: pour accomplir la même chose :

<div class="bg-[position:center_top_1rem]"></div>

Animations

Tailwind CSS a moins d'animations intégrées, nous supportons pleinement ses règles d'animation, et intégrons en interne Animate.css pour fournir plus d'effets d'animation.

Vous pouvez utiliser le préfixe animate- pour guider IntelliSense à trouver rapidement l'animation dont vous avez besoin.

TIP

Nous ne fusionnons pas les noms d'animation conflictuels de Tailwind et Animate.css. Si vous devez utiliser le nom d'animation d'Animate.css, veuillez utiliser animate-<name>-alt.

Par exemple

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

Si vous voulez personnaliser ou modifier l'effet d'animation, nous fournissons des éléments de configuration hautement personnalisables. Vous pouvez modifier la durée, le délai, la courbe de vitesse, etc. de l'animation à travers l'élément de configuration.

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

Aperçu de l'animation personnalisée :

animate-custom

TIP

Vous pouvez aussi ajouter category pour grouper les animations pour une meilleure gestion. Cela rendra plus facile pour les outils en aval de consommer les effets d'animation.

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

Différences avec Windi CSS

Breakpoints

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

Espaces dans la syntaxe bracket

Ce preset utilise _ au lieu de , pour respecter l'espace dans la syntaxe bracket.

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

Puisque certaines règles CSS nécessitent , comme parties de la valeur, ex. grid-cols-[repeat(3,auto)]

Fonctionnalités expérimentales

WARNING

Ce preset inclut des fonctionnalités expérimentales qui peuvent être changées de manière breaking à tout moment.

Media Hover

Media hover résout le problème du sticky hover où taper sur une cible qui inclut un style hover sur mobile persistera ce style hover jusqu'à taper ailleurs.

Puisque le style :hover régulier est probablement utilisé si largement, la variante utilise la syntaxe @hover pour la distinguer du pseudo hover régulier.

La variante @hover-text-red produira :

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

Options

INFO

Les options de ce preset sont héritées de @unocss/preset-mini.

important

• Type: boolean | string
• Défaut: false

L'option important vous permet de contrôler si les utilitaires d'UnoCSS doivent être marqués avec !important. Cela peut être vraiment utile quand vous utilisez UnoCSS avec du CSS existant qui a des sélecteurs de haute spécificité.

WARNING

Utiliser cette option appliquera important à tous les utilitaires générés par UnoCSS. Vous pouvez utiliser la variante important: à la place si vous voulez l'appliquer seulement à des utilitaires spécifiques.

Cependant, définir important à true peut introduire quelques problèmes lors de l'incorporation de bibliothèques JS tierces qui ajoutent des styles inline à vos éléments. Dans ces cas, les utilitaires !important d'UnoCSS battent les styles inline, ce qui peut casser votre design prévu.

Pour contourner cela, vous pouvez définir important à un sélecteur ID comme #app à la place :

import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

Cette configuration préfixera tous vos utilitaires avec le sélecteur donné, augmentant effectivement leur spécificité sans réellement les rendre !important.

L'utilitaire dark:bg-blue produira :

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}