Tulisan ini akan mengilustrasikan metode penerapan breakpoint dan kueri media pada utilitas 'luapan' di Tailwind CSS.
Bagaimana Cara Memanfaatkan Breakpoints dan Media Queries Dengan “overflow” di Tailwind?
Untuk menerapkan titik henti sementara dan kueri media tertentu pada utilitas 'luapan' di Tailwind, buat struktur HTML. Kemudian, gunakan “ md ' atau ' lg ” breakpoints dengan yang diinginkan “melimpah-
Contoh
Dalam contoh ini, kita akan menggunakan “md” titik putus dengan 'meluap-gulir' utilitas di
wadah untuk menambahkan bilah gulir ke dalamnya dan selalu menampilkannya pada ukuran layar sedang: < tubuh >
< div kelas = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 pembenaran teks' >
Tailwind CSS menyediakan berbagai utilitas 'luapan', seperti
'overflow-otomatis', 'overflow-scroll', 'overflow-tersembunyi', 'overflow-terlihat'
dll. Utilitas ini menentukan bagaimana elemen tertentu menangani konten
yang melebihi ukuran wadah. Setiap utilitas menawarkan fungsionalitas unik,
namun, tujuan akhirnya tetap sama, yaitu untuk mengontrol limpahan
perilaku elemen yang dipilih.
< / div >
< / tubuh >
Di Sini:
- Itu 'meluap-otomatis' class digunakan untuk menambahkan scrollbar ke wadah dan tampilkan hanya saat menggulir diperlukan.
- Itu 'md: luapan-gulir' kelas menambahkan bilah gulir dan selalu menampilkannya di “md” breakpoint (ukuran layar sedang).
Keluaran:
Menurut output di atas, breakpoint dan kueri media telah berhasil diterapkan pada utilitas 'meluap'.
Kesimpulan
Untuk menerapkan titik henti sementara dan kueri media pada utilitas 'luapan' di Tailwind, gunakan ' sm ”, “ md ' atau ' lg 'breakpoints dengan yang diinginkan' meluap-