Preset Wind3

Il preset compatto Tailwind CSS / Windi CSS per UnoCSS.

Codice Sorgente

INFO

@unocss/preset-wind e @unocss/preset-uno sono deprecati e rinominati in @unocss/preset-wind3. Questo preset eredita da @unocss/preset-mini.

Installazione

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

Questo preset è incluso nel pacchetto unocss, puoi anche importarlo da lì:

import { presetWind3 } from 'unocss'

Regole

L'obiettivo principale di questo preset è fornire compatibilità con Tailwind CSS e Windi CSS. Va notato che la compatibilità completa potrebbe non essere garantita. Si prega di fare riferimento alla loro documentazione per l'utilizzo dettagliato.

Per tutte le regole e i preset inclusi in questo preset, si prega di fare riferimento alla nostra documentazione interattiva o andare direttamente al codice sorgente.

Funzionalità

Modalità scura

Per impostazione predefinita, questo preset genera la modalità scura basata su classe con la variante dark:.

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

genererà:

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

Modalità scura basata su media query

Per usare invece la modalità scura basata su media query globalmente puoi cambiare la configurazione per la variante dark::

presetWind3({
  dark: 'media'
})

Ora

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

genererà:

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

Modalità scura basata su media query opt-in

Per usare la modalità scura basata su media query opt-in, puoi usare 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);
  }
}

Differenze da Tailwind CSS

Virgolette

L'uso di virgolette nel template (i file destinati ad essere processati) non è supportato a causa di come funziona l'estrattore. Ad esempio, non sarai in grado di scrivere before:content-['']. Per questi casi, potresti preferire introdurre una nuova utility che puoi impostare esplicitamente come class="before:content-empty".

background-position con valori arbitrari

Tailwind consente di usare valori personalizzati per background-position usando la sintassi nuda:

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

Il preset Wind interpreterà invece center_top_1rem come un colore. Usa un prefisso position: per ottenere la stessa cosa:

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

Animazioni

Tailwind CSS ha meno animazioni integrate, supportiamo completamente le sue regole di animazione e integriamo internamente Animate.css per fornire più effetti di animazione.

Puoi usare il prefisso animate- per guidare IntelliSense a trovare rapidamente l'animazione di cui hai bisogno.

TIP

Non uniamo nomi di animazione in conflitto da Tailwind e Animate.css. Se devi usare il nome dell'animazione da Animate.css, usa animate-<name>-alt.

Per esempio

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

Se vuoi personalizzare o modificare l'effetto di animazione, forniamo elementi di configurazione altamente personalizzabili. Puoi modificare la durata, il ritardo, la curva di velocità, ecc. dell'animazione attraverso l'elemento di configurazione.

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

Anteprima dell'animazione personalizzata:

animate-custom

TIP

Puoi anche aggiungere category per raggruppare le animazioni per una migliore gestione. Questo renderà più facile per gli strumenti downstream consumare gli effetti di animazione.

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

Differenze da Windi CSS

Breakpoint

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

Spazi nella sintassi delle parentesi

Questo preset usa _ invece di , per rispettare gli spazi nella sintassi delle parentesi.

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

Poiché alcune regole CSS richiedono , come parte del valore, ad esempio grid-cols-[repeat(3,auto)]

Funzionalità Sperimentali

WARNING

Questo preset include funzionalità sperimentali che possono essere modificate in modo breaking in qualsiasi momento.

Media Hover

Media hover risolve il problema dello sticky hover dove toccare un bersaglio che include lo stile hover su mobile manterrà quello stile hover fino a quando non si tocca altrove.

Poiché lo stile :hover regolare è probabilmente usato così ampiamente, la variante usa la sintassi @hover per distinguerla dal pseudo hover regolare.

La variante @hover-text-red produrrà:

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

Opzioni

INFO

Le opzioni di questo preset sono ereditate da @unocss/preset-mini.

important

• Tipo: boolean | string
• Predefinito: false

L'opzione important ti permette di controllare se le utility di UnoCSS dovrebbero essere marcate con !important. Questo può essere davvero utile quando usi UnoCSS con CSS esistente che ha selettori ad alta specificità.

WARNING

Usare questa opzione applicherà important a tutte le utility generate da UnoCSS. Puoi usare invece la variante important: se intendi applicarla solo a utility specifiche.

Tuttavia, impostare important su true può introdurre alcuni problemi quando incorpori librerie JS di terze parti che aggiungono stili inline ai tuoi elementi. In quei casi, le utility !important di UnoCSS sconfiggono gli stili inline, il che può rompere il tuo design inteso.

Per aggirare questo, puoi impostare important su un selettore ID come #app invece:

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

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

Questa configurazione prefiggerà tutte le tue utility con il selettore dato, aumentando efficacemente la loro specificità senza renderle effettivamente !important.

L'utility dark:bg-blue produrrà:

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