Com configurar el connector de relació d'aspecte a Tailwind?

Com Configurar El Connector De Relacio D Aspecte A Tailwind



A Tailwind, la relació d'aspecte és la proporció entre l'amplada i l'alçada d'un element, com ara un vídeo o una imatge. Tailwind CSS va introduir suport natiu per a utilitats de relació d'aspecte, que utilitzen la propietat de relació d'aspecte CSS per establir la relació d'aspecte desitjada per a un element. Tanmateix, aquesta propietat no és compatible amb navegadors antics. Per tant, els usuaris poden utilitzar el connector de relació d'aspecte per admetre aquests navegadors. Aquest connector introdueix dues classes, és a dir, ' aspecte-w-{n} ' i ' aspecte-h-{n} ”, que es pot combinar per donar a un element una relació d'aspecte fixa.

Aquest article explicarà el mètode per configurar el connector de relació d'aspecte a Tailwind.







Com configurar el connector de relació d'aspecte a Tailwind CSS?

Per configurar el connector de relació d'aspecte a Tailwind, mireu els passos que s'indiquen a continuació:



  • Instal·leu el connector de relació d'aspecte al projecte
  • Afegiu el connector de relació d'aspecte al fitxer 'tailwind.config.js' i desactiveu el ' aspecte ” connector bàsic
  • Utilitzeu les classes del connector de relació d'aspecte al programa HTML
  • Verifiqueu la sortida visualitzant la pàgina web HTML

Pas 1: instal·leu el connector de relació d'aspecte al projecte Tailwind



Primer, obriu el terminal i executeu l'ordre que s'indica a continuació per instal·lar el connector de relació d'aspecte al projecte:





asl i @ vent de cuacss / relació d'aspecte



Pas 2: configureu el connector de relació d'aspecte al fitxer de configuració de Tailwind

A continuació, obriu el fitxer 'tailwind.config.js', afegiu-hi el connector de relació d'aspecte i desactiveu el ' aspecte ” plugin bàsic per evitar conflictes:

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

CorePlugins: {
relació d'aspecte: fals ,
} ,

connectors: [
requereixen ( '@tailwindcss/proporció d'aspecte' ) ,
] ,
} ;

Pas 3: utilitzeu el connector de relació d'aspecte al programa HTML

Ara, feu un programa HTML i utilitzeu-hi el connector de relació d'aspecte. Per exemple, hem utilitzat el  ' aspecte-w-16 ' i ' aspecte-h-9 ” classes del nostre programa per mantenir la relació d'aspecte 16:9:

< cos >
< div classe = 'aspecte-w-16 aspecte-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
vora del marc = '0' permetre = 'acceleròmetre; reproducció automàtica;
porta-retalls-escriptura; mitjans xifrats; giroscopi;
imatge en imatge'
pantalla completa permès > iframe >
div >
cos >

Aquí:

  • El '
    'L'element utilitza dues classes de complements de relació d'aspecte, és a dir, ' aspecte-w-16 ' i ' aspecte-h-9 ”. Aquestes classes s'utilitzen per crear un contenidor amb una relació d'aspecte fixa de 16:9.
  • El '