Artikel ini akan mencontohkan metode penerapan breakpoint dan kueri media pada utilitas 'clear' di Tailwind.
Bagaimana Cara Memanfaatkan Breakpoints dan Media Queries pada 'clear' di Tailwind?
Untuk menerapkan breakpoint dan kueri media tertentu pada utilitas 'clear' di Tailwind, buat struktur HTML. Kemudian, tentukan nilai yang diinginkan ke ' hapus-
Contoh
Dalam contoh ini, kita akan menggunakan “ md ' breakpoint dengan ' jelas-keduanya ” utilitas dan “ lg ' breakpoint dengan ' jelas-tidak ada ” utilitas di “ ” untuk mengubah posisinya pada ukuran layar sedang dan besar:
< tubuh >
< div kelas = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' kelas = 'float-kiri p-3 w-28 h-24' semuanya = 'gambar' / >
< img src = 'tailwindcss_img.png' kelas = 'float-kanan p-3' semuanya = 'gambar' / >
< P kelas = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS menyediakan utilitas 'mengapung' untuk mengontrol pembungkusan konten di sekitar elemen.
Contoh ini akan menunjukkan cara menggunakan breakpoint dan kueri media dengan utilitas 'clear' di Tailwind. < / P >
< / div >
< / tubuh >
Di Sini:
- 'float-kiri' kelas mengapungkan elemen ke sisi kiri wadah.
- “mengambang-kanan” class mengapungkan elemen ke sisi kanan wadah.
- “kiri-jelas” kelas memindahkan elemen
di bawah elemen mengambang kiri dalam wadah.
- 'md: hapus-keduanya' class membersihkan float kiri dan kanan dan memposisikan elemen
di bawahnya pada ukuran layar sedang.
- “lg: hapus-tidak ada” class menonaktifkan semua clear yang diterapkan pada elemen
dan memungkinkan elemen mengapung di kedua sisi container pada ukuran layar yang besar.
Keluaran
Menurut output di atas, breakpoint dan kueri media yang ditentukan telah berhasil diterapkan ke utilitas 'clear'.
Kesimpulan
Untuk menerapkan breakpoint dan kueri media pada utilitas 'clear' di Tailwind, tentukan nilai yang diinginkan ke ' hapus-