Hvordan stille inn Aspect Ratio Plugin i Tailwind?

Hvordan Stille Inn Aspect Ratio Plugin I Tailwind



I Tailwind er sideforholdet andelen av et elements bredde og høyde, som en video eller et bilde. Tailwind CSS introduserte innebygd støtte for sideforholdsverktøy, som bruker egenskapen CSS aspektforhold for å angi ønsket sideforhold for et element. Denne egenskapen støttes imidlertid ikke i eldre nettlesere. Derfor kan brukere bruke sideforhold-plugin for å støtte disse nettleserne. Denne plugin-en introduserer to klasser, dvs. ' aspekt-w-{n} ' og ' aspekt-h-{n} ”, som kan kombineres for å gi et element et fast sideforhold.

Denne artikkelen vil forklare metoden for å angi sideforhold-plugin i Tailwind.





Hvordan stille inn Aspect Ratio Plugin i Tailwind CSS?

For å stille inn sideforholdsplugin i Tailwind, se på trinnene nedenfor:



  • Installer sideforhold-plugin i prosjektet
  • Legg til sideforhold-plugin-modulen i 'tailwind.config.js'-filen og deaktiver ' aspekt ' kjerneplugin
  • Bruk sideforholdsplugin-klassene i HTML-programmet
  • Bekreft resultatet ved å se HTML-nettsiden

Trinn 1: Installer Aspect Ratio Plugin i Tailwind Project



Først åpner du terminalen og kjør kommandoen nedenfor for å installere sideforholdsplugin i prosjektet:



asl og @ medvindcss / størrelsesforholdet



Trinn 2: Konfigurer Aspect Ratio Plugin i Tailwind Config File

Åpne deretter 'tailwind.config.js'-filen, legg til sideforholds-pluginen i den, og deaktiver ' aspekt ” kjerneplugin for å unngå konflikter:

module.exports = {
innhold: [ './index.html' ] ,

corePlugins: {
størrelsesforholdet: falsk ,
} ,

plugins: [
krever ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Trinn 3: Bruk Aspect Ratio Plugin i HTML-programmet

Lag et HTML-program og bruk sideforhold-pluginen i den. Vi har for eksempel brukt  aspekt-w-16 ' og ' aspekt-h-9 ” klasser i programmet vårt for å opprettholde 16:9 sideforhold:

< kropp >
< div klasse = 'aspekt-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
ramme grense = '0' tillate = 'akselerometer; autoavspilling;
utklippstavle-skrive; krypterte medier; gyroskop;
bilde-i-bilde' tillat fullskjerm > iframe >
div >
kropp >

Her:

  • «
    '-elementet bruker to sideforhold-plugin-klasser, dvs. ' aspekt-w-16 ' og ' aspekt-h-9 '. Disse klassene brukes til å lage en beholder med et fast sideforhold på 16:9.
  • «