Tailwind CSS menyediakan “ jernih ” utilitas yang mengontrol perilaku elemen tertentu saat berada di sebelah elemen mengambang apa pun. Misalnya, kelas utilitas 'clear-left' dan 'clear-right' memungkinkan pengembang membuat elemen yang ditentukan bergerak di bawah elemen mengambang kiri atau mengambang kanan dalam wadah. Namun, terkadang, pengguna ingin menonaktifkan penghapusan yang diterapkan pada elemen tertentu dan mengizinkannya muncul di sebelah elemen mengambang. Dalam keadaan seperti itu, utilitas 'clear-none' dapat digunakan untuk menentukan nilai default elemen.
Artikel ini akan memberikan contoh prosedur untuk menonaktifkan semua pembersihan yang diterapkan di Tailwind CSS.
Bagaimana Cara Menonaktifkan Semua Penyelesaian yang Diterapkan di Tailwind?
Untuk menonaktifkan semua pembersihan yang diterapkan di Tailwind, buat file HTML dan tambahkan “ jelas-tidak ada ” kelas utilitas dengan elemen yang diinginkan dalam program HTML. Utilitas ini mengatur ulang setiap 'hapus' yang diterapkan ke elemen tertentu dan menentukan nilai default.
Sintaksis
< elemen kelas = 'jelas-tidak ada' > ... elemen >
Contoh
Dalam contoh ini, kita akan menggunakan “ jelas-tidak ada ” utilitas dengan “ ” untuk menyetel ulang pembersihan yang diterapkan dan membiarkannya mengapung di sisi kiri dan kanan:
< 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 = 'jelas-tidak ada' > Tailwind CSS menyediakan 'jernih' utilitas untuk mengontrol pembungkus konten di sekitar elemen.
Contoh ini akan menunjukkan cara menonaktifkan semua pembersihan yang diterapkan pada elemen. Untuk menyetel ulang pembersihan apa pun yang diterapkan ke elemen tertentu, file 'jelas-tidak ada' utilitas digunakan. P >
div >
tubuh >
Di Sini:
- “ mengambang-kiri ” kelas mengapungkan elemen
ke sisi kiri wadah.
- “ float-right ” class mengapungkan elemen
ke sisi kanan wadah.
- “ jelas-tidak ada ” class menonaktifkan semua clear yang diterapkan pada elemen
dan memungkinkan elemen mengapung di kedua sisi.
Keluaran
Di halaman web di atas, terlihat bahwa konten mengambang di kedua sisi wadah. Ini menunjukkan bahwa semua pembersihan yang diterapkan telah dinonaktifkan dari elemen yang ditentukan.
Kesimpulan
Untuk menonaktifkan semua pembersihan yang diterapkan di Tailwind, gunakan tombol “ jelas-tidak ada ” kelas utilitas dengan elemen yang diinginkan dalam program HTML. Utilitas ini me-reset setiap clear yang diterapkan pada elemen tertentu dan menentukan nilai default. Untuk verifikasi, navigasikan ke halaman web dan lihat perubahannya. Artikel ini telah menunjukkan contoh untuk menonaktifkan semua pembersihan yang diterapkan di Tailwind CSS.