Wind3 preset

Tailwind CSS / Windi CSS kompaktný preset pre UnoCSS.

Zdrojový kód

INFO

@unocss/preset-wind a @unocss/preset-uno sú zastarané a premenované na @unocss/preset-wind3. Tento preset dedí z @unocss/preset-mini.

Inštalácia

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

Tento preset je zahrnutý v balíku unocss, môžete ho tiež importovať odtiaľ:

import { presetWind3 } from 'unocss'

Pravidlá

Hlavným cieľom tohto presetu je poskytnúť kompatibilitu s Tailwind CSS a Windi CSS. Je potrebné poznamenať, že úplná kompatibilita nemusí byť zaručená. Podrobné použitie nájdete v ich dokumentácii.

Pre všetky pravidlá a presety zahrnuté v tomto presete si pozrite naše interaktívne dokumenty alebo priamo prejdite na zdrojový kód.

Funkcie

Dark mode

Predvolene tento preset generuje class-based dark mode s variantom dark:.

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

vygeneruje:

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

Dark mode založený na media query

Na použitie dark mode založeného na media query globálne môžete zmeniť konfiguráciu pre variant dark::

presetWind3({
  dark: 'media'
})

Teraz

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

vygeneruje:

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

Voliteľný dark mode založený na media query

Na použitie voliteľného dark mode založeného na media query môžete použiť variant @dark::

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

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

Rozdiely oproti Tailwind CSS

Úvodzovky

Používanie úvodzoviek v šablóne (súbory určené na spracovanie) nie je podporované kvôli spôsobu, akým funguje extractor. Napríklad nebudete môcť napísať before:content-['']. Pre tieto prípady môže byť vhodnejšie zaviesť novú utilitu, ktorú môžete explicitne nastaviť, ako napríklad class="before:content-empty".

background-position s ľubovoľnými hodnotami

Tailwind umožňuje používať vlastné hodnoty pre background-position pomocou holého zápisu:

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

Wind preset namiesto toho interpretuje center_top_1rem ako farbu. Na dosiahnutie rovnakého výsledku použite prefix position::

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

Animácie

Tailwind CSS má menej vstavaných animácií, plne podporujeme jeho pravidlá animácií a interne integrujeme Animate.css na poskytnutie ďalších efektov animácií.

Môžete použiť prefix animate- na rýchle vedenie IntelliSense k nájdeniu potrebnej animácie.

TIP

Nezlučujeme konfliktné názvy animácií z Tailwind a Animate.css. Ak potrebujete použiť názov animácie z Animate.css, použite animate-<name>-alt.

Napríklad

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

Ak chcete prispôsobiť alebo upraviť efekt animácie, poskytujeme vysoko prispôsobiteľné konfiguračné položky. Môžete upraviť trvanie, oneskorenie, krivku rýchlosti atď. animácie pomocou konfiguračnej položky.

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

Náhľad vlastnej animácie:

animate-custom

TIP

Môžete tiež pridať category na zoskupenie animácií pre lepšiu správu. To uľahčí downstream nástrojom konzumovať efekty animácií.

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

Rozdiely oproti Windi CSS

Breakpointy

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

Medzery v zátvorkovej syntaxi

Tento preset používa _ namiesto , na rešpektovanie medzier v zátvorkovej syntaxi.

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

Keďže niektoré pravidlá CSS vyžadujú , ako súčasť hodnoty, napr. grid-cols-[repeat(3,auto)]

Experimentálne funkcie

WARNING

Tento preset obsahuje experimentálne funkcie, ktoré môžu byť kedykoľvek zmenené spôsobom, ktorý nie je spätne kompatibilný.

Media Hover

Media hover rieši problém sticky hover, kde klepnutie na cieľ, ktorý obsahuje štýl hover na mobile, pretrváva tento štýl hover až do klepnutia inde.

Keďže bežný štýl :hover sa pravdepodobne používa tak široko, variant používa syntax @hover na odlíšenie od bežného pseudo hover.

Variant @hover-text-red vygeneruje:

@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 tohto presetu sú dedené z @unocss/preset-mini.

important

• Type: boolean | string
• Default: false

Možnosť important vám umožňuje ovládať, či majú byť utility UnoCSS označené ako !important. Toto môže byť veľmi užitočné pri používaní UnoCSS s existujúcim CSS, ktoré má vysoko špecifické selektory.

WARNING

Použitie tejto možnosti aplikuje important na všetky utility generované UnoCSS. Ak ich chcete aplikovať iba na konkrétne utility, môžete namiesto toho použiť variant important:.

Avšak nastavenie important na true môže spôsobiť niektoré problémy pri začleňovaní third party JS knižníc, ktoré pridávajú inline štýly do vašich prvkov. V týchto prípadoch utility !important od UnoCSS porážajú inline štýly, čo môže narušiť váš zamýšľaný dizajn.

Aby ste sa tomu vyhli, môžete nastaviť important na ID selektor ako #app:

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

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

Táto konfigurácia bude prefixovať všetky vaše utility daným selektorom, čím efektívne zvýši ich špecifickosť bez toho, aby ich skutočne urobila !important.

Utility dark:bg-blue vygeneruje:

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