Wind3 preset

Tailwind CSS / Windi CSS kompakt preset för UnoCSS.

Källkod

INFO

@unocss/preset-wind och @unocss/preset-uno är föråldrade och har bytt namn till @unocss/preset-wind3. Denna preset ärver från @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

Denna preset ingår i unocss-paketet, du kan också importera den därifrån:

import { presetWind3 } from 'unocss'

Regler

Det primära målet för denna preset är att tillhandahålla kompatibilitet med Tailwind CSS och Windi CSS. Det bör noteras att fullständig kompatibilitet kanske inte kan garanteras. Se deras dokumentation för detaljerad användning.

För alla regler och presets som ingår i denna preset, se vår interaktiva dokumentation eller gå direkt till källkoden.

Funktioner

Mörkt läge

Som standard genererar denna preset klassbaserat mörkt läge med dark:-variant.

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

kommer att generera:

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

Mediafrågebaserat mörkt läge

För att istället använda mediafrågebaserat mörkt läge globalt kan du ändra konfigurationen för dark:-varianten:

presetWind3({
  dark: 'media'
})

Nu kommer

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

att generera:

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

Opt-in mediafrågebaserat mörkt läge

För att använda opt-in mediafrågebaserat mörkt läge kan du använda @dark:-varianten:

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

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

Skillnader från Tailwind CSS

Citattecken

Att använda citattecken i mallen (filerna avsedda att bearbetas) stöds inte på grund av hur extraktorn fungerar. T.ex. du kommer inte att kunna skriva before:content-['']. För dessa fall kan du föredra att introducera ett nytt verktyg som du explicit kan ställa in som class="before:content-empty".

background-position med godtyckliga värden

Tailwind tillåter att använda anpassade värden för background-position med den nakna syntaxen:

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

Wind-preset kommer istället att tolka center_top_1rem som en färg. Använd ett position:-prefix för att uppnå samma sak:

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

Animationer

Tailwind CSS har färre inbyggda animationer, vi stöder fullt ut dess animationsregler och integrerar internt Animate.css för att tillhandahålla fler animationseffekter.

Du kan använda animate--prefixet för att vägleda IntelliSense för att snabbt hitta animationen du behöver.

TIP

Vi slår inte samman motstridiga animationsnamn från Tailwind och Animate.css. Om du behöver använda animationsnamnet från Animate.css, använd animate-<namn>-alt.

Till exempel

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

Om du vill anpassa eller modifiera animationseffekten tillhandahåller vi mycket anpassningsbara konfigurationsalternativ. Du kan modifiera varaktighet, fördröjning, hastighetskurva etc. för animationen genom konfigurationsalternativet.

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

Förhandsgranska den anpassade animationen:

animate-custom

TIP

Du kan också lägga till category för att gruppera animationer för bättre hantering. Detta kommer att göra det lättare för nedströmsverktyg att konsumera animationseffekter.

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

Skillnader från Windi CSS

Brytpunkter

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

Klammersyntax mellanslag

Denna preset använder _ istället för , för att respektera mellanslag i klammersyntax.

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

Eftersom vissa CSS-regler kräver , som delar av värdet, t.ex. grid-cols-[repeat(3,auto)]

Experimentella funktioner

WARNING

Denna preset inkluderar experimentella funktioner som kan ändras på brytande sätt när som helst.

Media Hover

Media-hover adresserar sticky hover-problemet där tryck på mål som inkluderar hover-stil på mobil kommer att bestå den hover-stilen tills tryck någon annanstans.

Eftersom den vanliga :hover-stilen mest troligt används så brett, använder varianten @hover-syntax för att skilja den från den vanliga hover-pseudo.

Varianten @hover-text-red kommer att generera:

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

Alternativ

INFO

Denna presets alternativ ärver från @unocss/preset-mini.

important

• Typ: boolean | string
• Standard: false

important-alternativet låter dig kontrollera om UnoCSS:s verktyg ska markeras med !important. Detta kan vara riktigt användbart när du använder UnoCSS med befintlig CSS som har hög specificitetsselektorer.

WARNING

Att använda detta alternativ kommer att tillämpa important på alla verktyg som genereras av UnoCSS. Du kan använda important:-variant istället om du menar att tillämpa det endast på specifika verktyg.

Att ställa in important till true kan dock introducera vissa problem när man införlivar tredjeparts JS-bibliotek som lägger till inline-stilar till dina element. I dessa fall besegrar UnoCSS:s !important-verktyg inline-stilarna, vilket kan bryta din avsedda design.

För att komma runt detta kan du ställa in important till en ID-selektor som #app istället:

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

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

Denna konfiguration kommer att prefixa alla dina verktyg med den givna selektorn, vilket effektivt ökar deras specificitet utan att faktiskt göra dem !important.

Verktyget dark:bg-blue kommer att generera:

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