Wind3 Preset

Das Tailwind CSS / Windi CSS kompakte Preset für UnoCSS.

Quellcode

INFO

@unocss/preset-wind und @unocss/preset-uno sind veraltet und wurden in @unocss/preset-wind3 umbenannt. Dieses Preset erbt von @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

Dieses Preset ist im unocss Paket enthalten, Sie können es auch von dort importieren:

import { presetWind3 } from 'unocss'

Regeln

Das Hauptziel dieses Presets ist es, Kompatibilität mit Tailwind CSS und Windi CSS zu bieten. Es sollte beachtet werden, dass vollständige Kompatibilität möglicherweise nicht garantiert werden kann. Bitte beziehen Sie sich auf deren Dokumentation für detaillierte Verwendung.

Für alle Regeln und Presets, die in diesem Preset enthalten sind, beziehen Sie sich bitte auf unsere interaktive Dokumentation oder gehen Sie direkt zum Quellcode.

Funktionen

Dark Mode

Standardmäßig generiert dieses Preset klassenbasierten Dark Mode mit der dark: Variante.

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

wird generieren:

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

Media Query basierter Dark Mode

Um stattdessen Media Query basierten Dark Mode global zu verwenden, können Sie die Konfiguration für die dark: Variante ändern:

presetWind3({
  dark: 'media'
})

Jetzt

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

wird generieren:

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

Opt-in Media Query basierter Dark Mode

Um Opt-in Media Query basierten Dark Mode zu verwenden, können Sie die @dark: Variante verwenden:

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

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

Unterschiede zu Tailwind CSS

Anführungszeichen

Die Verwendung von Anführungszeichen in der Vorlage (die Dateien, die verarbeitet werden sollen) wird aufgrund der Funktionsweise des Extractors nicht unterstützt. Z.B. können Sie before:content-[''] nicht schreiben. Für diese Fälle möchten Sie möglicherweise ein neues Utility einführen, das Sie explizit setzen können, wie class="before:content-empty".

background-position mit beliebigen Werten

Tailwind erlaubt die Verwendung benutzerdefinierter Werte für background-position mit der bloßen Syntax:

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

Das Wind Preset interpretiert stattdessen center_top_1rem als Farbe. Verwenden Sie ein position: Präfix, um dasselbe zu erreichen:

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

Animationen

Tailwind CSS hat weniger eingebaute Animationen, wir unterstützen vollständig seine Animationsregeln und integrieren intern Animate.css, um mehr Animationseffekte zu bieten.

Sie können das animate- Präfix verwenden, um IntelliSense zu führen, die Animation schnell zu finden, die Sie benötigen.

TIP

Wir führen keine kollidierenden Animationsnamen von Tailwind und Animate.css zusammen. Wenn Sie den Animationsnamen von Animate.css verwenden müssen, verwenden Sie bitte animate-<name>-alt.

Zum Beispiel

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

Wenn Sie den Animationseffekt anpassen oder ändern möchten, bieten wir hochgradig anpassbare Konfigurationselemente. Sie können die Dauer, Verzögerung, Geschwindigkeitskurve usw. der Animation über das Konfigurationselement ändern.

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

Vorschau der benutzerdefinierten Animation:

animate-custom

TIP

Sie können auch category hinzufügen, um Animationen für besseres Management zu gruppieren. Dies erleichtert es nachgelagerten Tools, Animationseffekte zu konsumieren.

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

Unterschiede zu 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

Klammer-Syntax Leerzeichen

Dieses Preset verwendet _ anstelle von ,, um Leerzeichen in der Klammer-Syntax zu respektieren.

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

Da einige CSS-Regeln , als Teil des Werts erfordern, z.B. grid-cols-[repeat(3,auto)]

Experimentelle Funktionen

WARNING

Dieses Preset enthält experimentelle Funktionen, die jederzeit auf breaking Weise geändert werden können.

Media Hover

Media Hover adressiert das sticky hover Problem, bei dem das Tippen auf ein Ziel, das Hover-Style auf Mobilgeräten enthält, diesen Hover-Style beibehält, bis woanders getippt wird.

Da der reguläre :hover Style wahrscheinlich so weit verbreitet verwendet wird, verwendet die Variante die @hover Syntax, um sie vom regulären hover Pseudo zu unterscheiden.

Die Variante @hover-text-red wird ausgeben:

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

Optionen

INFO

Diese Preset-Optionen werden von @unocss/preset-mini geerbt.

important

• Typ: boolean | string
• Standard: false

Die important Option ermöglicht es Ihnen zu steuern, ob UnoCSS's Utilities mit !important markiert werden sollen. Dies kann wirklich nützlich sein, wenn Sie UnoCSS mit vorhandenem CSS verwenden, das Selektoren mit hoher Spezifität hat.

WARNING

Die Verwendung dieser Option wird important auf alle von UnoCSS generierten Utilities anwenden. Sie können stattdessen die important: Variante verwenden, wenn Sie sie nur auf bestimmte Utilities anwenden möchten.

Das Setzen von important auf true kann jedoch einige Probleme einführen, wenn Sie Drittanbieter-JS-Bibliotheken einbinden, die Inline-Styles zu Ihren Elementen hinzufügen. In diesen Fällen besiegen UnoCSS's !important Utilities die Inline-Styles, was Ihr beabsichtigtes Design brechen kann.

Um dies zu umgehen, können Sie important auf einen ID-Selektor wie #app setzen:

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

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

Diese Konfiguration wird alle Ihre Utilities mit dem angegebenen Selektor präfixieren und dadurch effektiv ihre Spezifität erhöhen, ohne sie tatsächlich !important zu machen.

Das Utility dark:bg-blue wird ausgeben:

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