Wind3 prednastavitev

Kompaktna prednastavitev Tailwind CSS / Windi CSS za UnoCSS.

Izvorna koda

INFO

@unocss/preset-wind in @unocss/preset-uno sta opuščena in preimenovana v @unocss/preset-wind3. Ta prednastavitev deduje od @unocss/preset-mini.

Namestitev

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

Ta prednastavitev je vključena v paket unocss, lahko jo tudi uvozite od tam:

import { presetWind3 } from 'unocss'

Pravila

Primarni cilj te prednastavitve je zagotoviti združljivost s Tailwind CSS in Windi CSS. Opozoriti je treba, da popolna združljivost morda ne bo zagotovljena. Za podrobno uporabo si oglejte njihovo dokumentacijo.

Za vsa pravila in prednastavitve, vključene v to prednastavitev, glejte našo interaktivno dokumentacijo ali neposredno pojdite na izvorno kodo.

Funkcije

Temni način

Privzeto ta prednastavitev generira temni način na osnovi razreda z varianto dark:.

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

bo generiralo:

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

Temni način na osnovi medijske poizvedbe

Če želite namesto tega uporabiti temni način na osnovi medijske poizvedbe globalno, lahko spremenite konfiguracijo za varianto dark::

presetWind3({
  dark: 'media'
})

Zdaj

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

bo generiralo:

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

Opt-in temni način na osnovi medijske poizvedbe

Za uporabo opt-in temnega načina na osnovi medijske poizvedbe lahko uporabite varianto @dark::

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

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

Razlike od Tailwind CSS

Narekovaji

Uporaba narekovajev v predlogi (datoteke, namenjene obdelavi) ni podprta zaradi načina delovanja ekstraktorja. Npr. ne boste mogli napisati before:content-['']. Za te primere boste morda raje uvedli nov pripomoček, ki ga lahko eksplicitno nastavite, kot je class="before:content-empty".

background-position s poljubnimi vrednostmi

Tailwind omogoča uporabo poljubnih vrednosti za background-position z uporabo osnovne sintakse:

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

Prednastavitev Wind bo namesto tega interpretirala center_top_1rem kot barvo. Uporabite predpono position: za dosego enakega rezultata:

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

Animacije

Tailwind CSS ima manj vgrajenih animacij, mi v celoti podpiramo njegova pravila animacije in interno integriramo Animate.css za zagotavljanje več animacijskih učinkov.

Uporabite lahko predpono animate- za hitro iskanje potrebne animacije z IntelliSense.

TIP

Ne združujemo konfliktnih imen animacij iz Tailwind in Animate.css. Če morate uporabiti ime animacije iz Animate.css, uporabite animate-<ime>-alt.

Na primer

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

Če želite prilagoditi ali spremeniti učinek animacije, zagotavljamo visoko prilagodljive konfiguracijske elemente. Spremenite lahko trajanje, zamik, krivuljo hitrosti itd. animacije prek konfiguracijskega elementa.

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

Predogled prilagojene animacije:

animate-custom

TIP

Animacijam lahko dodate tudi category za boljše upravljanje. To bo olajšalo porabo animacijskih učinkov za orodja nižjega nivoja.

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

Razlike od Windi CSS

Prelomne točke

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

Presledki v sintaksi z oklepaji

Ta prednastavitev uporablja _ namesto , za spoštovanje presledka v sintaksi z oklepaji.

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

Ker nekatera CSS pravila zahtevajo , kot del vrednosti, npr. grid-cols-[repeat(3,auto)]

Eksperimentalne funkcije

WARNING

Ta prednastavitev vključuje eksperimentalne funkcije, ki se lahko kadar koli spremenijo na prelomne načine.

Media Hover

Media hover obravnava problem lepljivega hoverja, kjer tap cilja, ki vključuje slog hover na mobilnih napravah, ohrani ta slog hover, dokler ne tapnete drugje.

Ker je običajni slog :hover verjetno uporabljen tako široko, varianta uporablja sintaksno @hover za razlikovanje od običajnega psevda hover.

Varianta @hover-text-red bo izpisala:

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

Možnosti

INFO

Možnosti te prednastavitve so podedovane od @unocss/preset-mini.

important

• Tip: boolean | string
• Privzeto: false

Možnost important vam omogoča nadzor, ali naj bodo pripomočki UnoCSS označeni z !important. To je lahko res uporabno, ko uporabljate UnoCSS z obstoječim CSS, ki ima selektorje z visoko specifičnostjo.

WARNING

Uporaba te možnosti bo uporabila important za vse pripomočke, ki jih generira UnoCSS. Če jih želite uporabiti le za določene pripomočke, lahko namesto tega uporabite varianto important:.

Vendar pa nastavitev important na true lahko povzroči nekatere težave pri vključevanju knjižnic JS tretjih oseb, ki dodajajo slogovne vrstice vašim elementom. V teh primerih pripomočki UnoCSS !important premagajo slogovne vrstice, kar lahko pokvari vašo načrtovano zasnovo.

Da se temu izognete, lahko namesto tega nastavite important na ID selektor, kot je #app:

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

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

Ta konfiguracija bo predpono vseh vaših pripomočkov z danim selektorjem, kar učinkovito poveča njihovo specifičnost, ne da bi jih dejansko naredila !important.

Pripomoček dark:bg-blue bo izpisal:

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