Paano Magtakda ng Aspect Ratio Plugin sa Tailwind?

Paano Magtakda Ng Aspect Ratio Plugin Sa Tailwind



Sa Tailwind, ang aspect ratio ay ang proporsyon ng lapad sa taas ng isang elemento, tulad ng isang video o isang imahe. Ipinakilala ng Tailwind CSS ang katutubong suporta para sa mga aspect-ratio utilities, na gumagamit ng CSS aspect-ratio property upang itakda ang gustong aspect ratio para sa isang elemento. Gayunpaman, hindi sinusuportahan ang property na ito sa mga mas lumang browser. Samakatuwid, maaaring gamitin ng mga user ang aspect ratio plugin upang suportahan ang mga browser na ito. Ang plugin na ito ay nagpapakilala ng dalawang klase i.e., ' aspeto-w-{n} 'at' aspeto-h-{n} ”, na maaaring pagsamahin upang bigyan ang isang elemento ng isang nakapirming aspect ratio.

Ipapaliwanag ng artikulong ito ang paraan upang itakda ang aspect ratio plugin sa Tailwind.





Paano Magtakda ng Aspect Ratio Plugin sa Tailwind CSS?

Upang itakda ang aspect ratio plugin sa Tailwind, tingnan ang mga hakbang na ibinigay sa ibaba:



  • I-install ang plugin ng aspect ratio sa proyekto
  • Idagdag ang aspect ratio plugin sa “tailwind.config.js” file at i-disable ang “ aspeto ” pangunahing plugin
  • Gamitin ang mga klase ng plugin ng aspect ratio sa HTML program
  • I-verify ang output sa pamamagitan ng pagtingin sa HTML web page

Hakbang 1: I-install ang Aspect Ratio Plugin sa Tailwind Project



Una, buksan ang terminal at isagawa ang nakasaad sa ibaba na command upang i-install ang aspect ratio plugin sa proyekto:



asl at @ tailwindcss / aspect-ratio



Hakbang 2: I-configure ang Aspect Ratio Plugin sa Tailwind Config File

Pagkatapos, buksan ang 'tailwind.config.js' na file, idagdag ang aspect ratio plugin dito, at huwag paganahin ang ' aspeto ” core plugin upang maiwasan ang anumang mga salungatan:

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

corePlugins: {
aspect ratio: mali ,
} ,

mga plugin: [
nangangailangan ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Hakbang 3: Gamitin ang Aspect Ratio Plugin sa HTML Program

Ngayon, gumawa ng HTML program at gamitin ang aspect ratio plugin dito. Halimbawa, ginamit namin ang  ' aspeto-w-16 'at' aspeto-h-9 ” mga klase sa aming programa upang mapanatili ang 16:9 aspect ratio:

< katawan >
< div klase = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
paligid ng frame = '0' payagan = 'accelerometer; autoplay;
clipboard-magsulat; naka-encrypt na-media; dyayroskop;
larawan-sa-larawan' allowfullscreen > iframe >
div >
katawan >

dito:

  • Ang '
    'Ang elemento ay gumagamit ng dalawang klase ng aspect ratio plugin i.e., ' aspeto-w-16 'at' aspeto-h-9 ”. Ginagamit ang mga klaseng ito para gumawa ng container na may nakapirming aspect ratio na 16:9.
  • Ang '