Jak nastavit plugin pro poměr stran ve službě Tailwind?

Jak Nastavit Plugin Pro Pomer Stran Ve Sluzbe Tailwind



V Tailwind je poměr stran poměr šířky prvku k výšce, jako je video nebo obrázek. Tailwind CSS zavedlo nativní podporu pro nástroje pro poměr stran, které používají vlastnost CSS aspect-ratio k nastavení požadovaného poměru stran pro prvek. Tato vlastnost však není podporována ve starších prohlížečích. Uživatelé proto mohou pro podporu těchto prohlížečů použít plugin pro poměr stran. Tento plugin zavádí dvě třídy, tj. aspekt-w-{n} ' a ' aspekt-h-{n} “, které lze zkombinovat a dát prvku pevný poměr stran.

Tento článek vysvětlí způsob nastavení pluginu pro poměr stran v Tailwindu.





Jak nastavit plugin pro poměr stran v Tailwind CSS?

Chcete-li nastavit plugin pro poměr stran v Tailwindu, podívejte se na níže uvedené kroky:



  • Nainstalujte plugin pro poměr stran v projektu
  • Přidejte plugin pro poměr stran do souboru „tailwind.config.js“ a vypněte „ aspekt “základní plugin
  • Použijte třídy pluginů pro poměr stran v programu HTML
  • Ověřte výstup zobrazením webové stránky HTML

Krok 1: Nainstalujte plugin Aspect Ratio do projektu Tailwind



Nejprve otevřete terminál a spusťte níže uvedený příkaz k instalaci pluginu pro poměr stran do projektu:



asl a @ tailwindcss / poměr stran



Krok 2: Nakonfigurujte modul Aspect Ratio Plugin v konfiguračním souboru Tailwind

Poté otevřete soubor „tailwind.config.js“, přidejte do něj plugin pro poměr stran a vypněte „ aspekt ”základní plugin, aby se předešlo jakýmkoli konfliktům:

modul.export = {
obsah: [ './index.html' ] ,

corePlugins: {
poměr stran: Nepravdivé ,
} ,

pluginy: [
vyžadovat ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Krok 3: Použijte modul Aspect Ratio Plugin v programu HTML

Nyní vytvořte HTML program a použijte v něm plugin pro poměr stran. Použili jsme například  “ aspekt-w-16 ' a ' aspekt-h-9 ” třídy v našem programu pro zachování poměru stran 16:9:

< tělo >
< div třída = 'aspect-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
rámová hranice = '0' dovolit = 'akcelerometr; automatické přehrávání;
schránka-psát; šifrovaná média; gyroskop;
obraz v obraze' povolená celá obrazovka > iframe >
div >
tělo >

Tady:

  • '
    ” prvek používá dvě třídy pluginů poměru stran, např. aspekt-w-16 ' a ' aspekt-h-9 “. Tyto třídy se používají k vytvoření kontejneru s pevným poměrem stran 16:9.
  • '