Bagaimana Cara Mengatur Plugin Rasio Aspek di Tailwind?

Bagaimana Cara Mengatur Plugin Rasio Aspek Di Tailwind



Di Tailwind, rasio aspek adalah proporsi lebar dan tinggi suatu elemen, seperti video atau gambar. Tailwind CSS memperkenalkan dukungan asli untuk utilitas rasio aspek, yang menggunakan properti rasio aspek CSS untuk mengatur rasio aspek yang diinginkan untuk sebuah elemen. Namun, properti ini tidak didukung di browser lama. Oleh karena itu, pengguna dapat menggunakan plugin rasio aspek untuk mendukung browser tersebut. Plugin ini memperkenalkan dua kelas yaitu, “ aspek-w-{n} ' Dan ' aspek-h-{n} ”, yang dapat digabungkan untuk memberikan elemen rasio aspek tetap.

Artikel ini akan menjelaskan metode menyetel plugin rasio aspek di Tailwind.





Bagaimana Cara Mengatur Plugin Rasio Aspek di Tailwind CSS?

Untuk menyetel plugin rasio aspek di Tailwind, lihat langkah-langkah yang disediakan di bawah ini:



  • Instal plugin rasio aspek di proyek
  • Tambahkan plugin rasio aspek di file “tailwind.config.js” dan nonaktifkan “ aspek ” plugin inti
  • Gunakan kelas plugin rasio aspek dalam program HTML
  • Verifikasi hasilnya dengan melihat halaman web HTML

Langkah 1: Instal Plugin Rasio Aspek di Proyek Tailwind



Pertama, buka terminal dan jalankan perintah di bawah ini untuk menginstal plugin rasio aspek di proyek:



asl dan @ tailwindcss / rasio aspek



Langkah 2: Konfigurasikan Plugin Rasio Aspek di File Konfigurasi Tailwind

Kemudian, buka file “tailwind.config.js”, tambahkan plugin rasio aspek di dalamnya, dan nonaktifkan “ aspek ” plugin inti untuk menghindari konflik:

modul.ekspor = {
isi: [ './index.html' ] ,

plugin inti: {
rasio aspek: PALSU ,
} ,

plugin: [
memerlukan ( '@tailwindcss/rasio aspek' ) ,
] ,
} ;

Langkah 3: Gunakan Plugin Rasio Aspek dalam Program HTML

Sekarang, buatlah program HTML dan gunakan plugin rasio aspek di dalamnya. Misalnya, kami telah menggunakan  “ aspek-w-16 ' Dan ' aspek-h-9 ” kelas dalam program kami untuk mempertahankan rasio aspek 16:9:

< tubuh >
< div kelas = 'aspek-w-16 aspek-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
batas bingkai = '0' mengizinkan = 'akselerometer; putar otomatis;
tulis papan klip; media terenkripsi; giroskop;
gambar di dalam gambar' izinkan layar penuh > iframe >
div >
tubuh >

Di Sini:

  • “
    ” Elemen menggunakan dua kelas plugin rasio aspek yaitu, “ aspek-w-16 ' Dan ' aspek-h-9 ”. Kelas-kelas ini digunakan untuk membuat wadah dengan rasio aspek tetap 16:9.
  • “