Bagaimana untuk Menetapkan Pemalam Nisbah Aspek dalam Tailwind?

Bagaimana Untuk Menetapkan Pemalam Nisbah Aspek Dalam Tailwind



Dalam Tailwind, nisbah bidang ialah perkadaran lebar elemen kepada ketinggian, seperti video atau imej. Tailwind CSS memperkenalkan sokongan asli untuk utiliti nisbah aspek, yang menggunakan sifat nisbah aspek CSS untuk menetapkan nisbah aspek yang diingini untuk sesuatu elemen. Walau bagaimanapun, sifat ini tidak disokong dalam pelayar lama. Oleh itu, pengguna boleh menggunakan pemalam nisbah aspek untuk menyokong pelayar ini. Pemalam ini memperkenalkan dua kelas iaitu, “ aspek-w-{n} ” dan “ aspek-h-{n} ”, yang boleh digabungkan untuk memberikan unsur nisbah aspek tetap.

Artikel ini akan menerangkan kaedah untuk menetapkan pemalam nisbah aspek dalam Tailwind.





Bagaimana untuk Menetapkan Pemalam Nisbah Aspek dalam CSS Tailwind?

Untuk menetapkan pemalam nisbah aspek dalam Tailwind, lihat langkah yang disediakan di bawah:



  • Pasang pemalam nisbah aspek dalam projek
  • Tambahkan pemalam nisbah aspek dalam fail “tailwind.config.js” dan lumpuhkan “ aspek ” pemalam teras
  • Gunakan kelas pemalam nisbah aspek dalam program HTML
  • Sahkan output dengan melihat halaman web HTML

Langkah 1: Pasang Pemalam Nisbah Aspek dalam Projek Tailwind



Mula-mula, buka terminal dan laksanakan arahan yang dinyatakan di bawah untuk memasang pemalam nisbah aspek dalam projek:



asl dan @ tailwindcss / Nisbah aspek



Langkah 2: Konfigurasikan Pemalam Nisbah Aspek dalam Fail Tailwind Config

Kemudian, buka fail 'tailwind.config.js', tambah pemalam nisbah aspek di dalamnya dan lumpuhkan ' aspek ” pemalam teras untuk mengelakkan sebarang konflik:

modul.eksport = {
kandungan: [ './index.html' ] ,

corePlugins: {
Nisbah aspek: salah ,
} ,

pemalam: [
memerlukan ( '@tailwindcss/nisbah-aspek' ) ,
] ,
} ;

Langkah 3: Gunakan Pemalam Nisbah Aspek dalam Program HTML

Sekarang, buat program HTML dan gunakan pemalam nisbah aspek di dalamnya. Sebagai contoh, kami telah menggunakan  ' aspek-w-16 ” dan “ aspek-h-9 ” dalam program kami untuk mengekalkan nisbah bidang 16:9:

< badan >
< div kelas = 'aspek-w-16 aspek-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
sempadan bingkai = '0' benarkan = 'pecutan; automain;
papan keratan-tulis; encrypted-media; giroskop;
gambar dalam gambar' allowfullscreen > iframe >
div >
badan >

di sini:

  • '
    'elemen menggunakan dua kelas pemalam nisbah aspek iaitu, ' aspek-w-16 ” dan “ aspek-h-9 ”. Kelas ini digunakan untuk mencipta bekas dengan nisbah bidang tetap 16:9.
  • '