Làm cách nào để đặt plugin tỷ lệ khung hình trong Tailwind?

Lam Cach Nao De Dat Plugin Ty Le Khung Hinh Trong Tailwind



Trong Tailwind, tỷ lệ khung hình là tỷ lệ giữa chiều rộng và chiều cao của một phần tử, chẳng hạn như video hoặc hình ảnh. CSS Tailwind đã giới thiệu tính năng hỗ trợ gốc cho các tiện ích tỷ lệ khung hình, sử dụng thuộc tính tỷ lệ khung hình CSS để đặt tỷ lệ khung hình mong muốn cho một phần tử. Tuy nhiên, thuộc tính này không được hỗ trợ trong các trình duyệt cũ hơn. Do đó, người dùng có thể sử dụng plugin tỷ lệ khung hình để hỗ trợ các trình duyệt này. Plugin này giới thiệu hai lớp, tức là “ khía cạnh-w-{n} ' Và ' khía cạnh-h-{n} ”, có thể được kết hợp để tạo cho một phần tử một tỷ lệ khung hình cố định.

Bài viết này sẽ giải thích phương pháp thiết lập plugin tỷ lệ khung hình trong Tailwind.





Làm cách nào để đặt plugin tỷ lệ khung hình trong Tailwind CSS?

Để đặt plugin tỷ lệ khung hình trong Tailwind, hãy xem các bước được cung cấp bên dưới:



  • Cài đặt plugin tỷ lệ khung hình trong dự án
  • Thêm plugin tỷ lệ khung hình vào tệp “tailwind.config.js” và tắt “ diện mạo ” plugin cốt lõi
  • Sử dụng các lớp plugin tỷ lệ khung hình trong chương trình HTML
  • Xác minh đầu ra bằng cách xem trang web HTML

Bước 1: Cài đặt Plugin Tỷ lệ khung hình trong Dự án Tailwind



Đầu tiên, mở terminal và thực hiện lệnh dưới đây để cài đặt plugin tỷ lệ khung hình trong dự án:



asl và @ gió đuôi / tỷ lệ khung hình



Bước 2: Định cấu hình Plugin Tỷ lệ khung hình trong Tệp cấu hình Tailwind

Sau đó, mở tệp “tailwind.config.js”, thêm plugin tỷ lệ khung hình vào đó và tắt “ diện mạo ” plugin cốt lõi để tránh mọi xung đột:

module.exports = {
nội dung: [ './index.html' ] ,

plugin cốt lõi: {
tỷ lệ khung hình: SAI ,
} ,

bổ sung: [
yêu cầu ( '@tailwindcss/tỷ lệ khung hình' ) ,
] ,
} ;

Bước 3: Sử dụng Plugin Tỷ lệ khung hình trong Chương trình HTML

Bây giờ, hãy tạo một chương trình HTML và sử dụng plugin tỷ lệ khung hình trong đó. Ví dụ: chúng tôi đã sử dụng  “ khía cạnh-w-16 ' Và ' khía cạnh-h-9 ” trong chương trình của chúng tôi để duy trì tỷ lệ khung hình 16:9:

< thân hình >
< div lớp học = 'khía cạnh-w-16 khía cạnh-h-9' >
< khung nội tuyến src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
khung viền = '0' cho phép = 'gia tốc kế; tự động phát;
ghi vào clipboard; phương tiện được mã hóa; con quay hồi chuyển;
hình ảnh trong ảnh' cho phép toàn màn hình > khung nội tuyến >
div >
thân hình >

Đây:

  • Các '
    Phần tử ” đang sử dụng hai lớp plugin tỷ lệ khung hình, tức là “ khía cạnh-w-16 ' Và ' khía cạnh-h-9 ”. Các lớp này được sử dụng để tạo vùng chứa có tỷ lệ khung hình cố định là 16:9.
  • Các '