Kuidas Tailwindis kuvasuhte pluginat seadistada?

Kuidas Tailwindis Kuvasuhte Pluginat Seadistada



Tailwindis on kuvasuhe elemendi laiuse ja kõrguse suhe (nt video või pildi puhul). Tailwind CSS võttis kasutusele natiivse toe kuvasuhte utiliitidele, mis kasutavad elemendi soovitud kuvasuhte määramiseks CSS-i kuvasuhte atribuuti. Seda atribuuti aga vanemad brauserid ei toeta. Seetõttu saavad kasutajad nende brauserite toetamiseks kasutada kuvasuhte pistikprogrammi. See pistikprogramm tutvustab kahte klassi, st ' aspekt-w-{n} ” ja „ aspekt-h-{n} ”, mida saab kombineerida, et anda elemendile fikseeritud kuvasuhe.

See artikkel selgitab Tailwindis kuvasuhte pistikprogrammi määramise meetodit.





Kuidas Tailwind CSS-is kuvasuhte pluginat seadistada?

Tailwindis kuvasuhte pistikprogrammi seadistamiseks vaadake alltoodud samme.



  • Installige projekti kuvasuhte pistikprogramm
  • Lisage faili 'tailwind.config.js' kuvasuhte pistikprogramm ja keelake ' aspekt ” tuum plugin
  • Kasutage HTML-programmis kuvasuhte pistikprogrammide klasse
  • Kontrollige väljundit, vaadates HTML-i veebilehte

1. samm: installige Tailwind Projecti kuvasuhte pistikprogramm



Esmalt avage terminal ja käivitage alltoodud käsk, et installida projekti kuvasuhte pistikprogramm:



asl ja @ taganttuulcss / kuvasuhe



2. samm: konfigureerige kuvasuhte pistikprogramm Tailwindi konfiguratsioonifailis

Seejärel avage fail 'tailwind.config.js', lisage sellesse kuvasuhte pistikprogramm ja keelake ' aspekt ” põhiplugin, et vältida konflikte:

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

corePlugins: {
kuvasuhe: vale ,
} ,

pluginad: [
nõuda ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

3. samm: kasutage HTML-programmis kuvasuhte pistikprogrammi

Nüüd looge HTML-programm ja kasutage selles kuvasuhte pistikprogrammi. Näiteks oleme kasutanud  aspekt-w-16 ” ja „ aspekt-h-9 ” klassid meie programmis, et säilitada kuvasuhe 16:9:

< keha >
< div klass = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
raamipiir = '0' lubama = 'kiirendusmõõtur; automaatesitus;
lõikelaud-kirjutamine; krüpteeritud meedia; güroskoop;
pilt pildis' luba täisekraanil > iframe >
div >
keha >

Siin:

  • '
    ” element kasutab kahte kuvasuhte pistikprogrammide klassi, st „ aspekt-w-16 ” ja „ aspekt-h-9 ”. Neid klasse kasutatakse fikseeritud kuvasuhtega 16:9 konteineri loomiseks.
  • '