Tailwind CSS bietet „ klar „Dienstprogramme, die das Verhalten eines bestimmten Elements steuern, wenn es sich neben einem schwebenden Element befindet. Die Dienstprogrammklassen „clear-left“ und „clear-right“ ermöglichen es Entwicklern beispielsweise, die angegebenen Elemente unter alle links oder rechts schwebenden Elemente im Container zu verschieben. Manchmal möchten Benutzer jedoch die Löschung bestimmter Elemente deaktivieren und zulassen, dass sie neben den schwebenden Elementen angezeigt werden. Unter solchen Umständen kann das Dienstprogramm „clear-none“ verwendet werden, um den Standardwert des Elements zu definieren.
In diesem Artikel wird das Verfahren zum Deaktivieren aller angewendeten Löschvorgänge in Tailwind CSS veranschaulicht.
Wie deaktiviere ich alle angewendeten Löschvorgänge in Tailwind?
Um alle angewendeten Löschungen in Tailwind zu deaktivieren, erstellen Sie eine HTML-Datei und fügen Sie das „ klar-keine ” Utility-Klasse mit dem gewünschten Element im HTML-Programm. Dieses Dienstprogramm setzt alle „Löschvorgänge“ zurück, die auf ein bestimmtes Element angewendet werden, und definiert den Standardwert.
Syntax
< Element Klasse = „klar-keine“ > ... Element >
Beispiel
In diesem Beispiel verwenden wir das „ klar-keine ” Dienstprogramm mit dem „ ”-Element, um angewendete Löschvorgänge zurückzusetzen und es auf der linken und rechten Seite schweben zu lassen:
< Körper >
< div Klasse = „h-96 mx-10 p-8 bg-sky-500“ >
< Bild src = „tailwindcss_img.png“ Klasse = „float-left p-3 w-28 h-24“ alles = 'Bild' />
< Bild src = „tailwindcss_img.png“ Klasse = „float-right p-3“ alles = 'Bild' />
< P Klasse = „klar-keine“ > Tailwind CSS bietet 'klar' Dienstprogramme zur Steuerung des Inhaltsumbruchs um ein Element.
In diesem Beispiel wird gezeigt, wie alle auf Elemente angewendeten Löschvorgänge deaktiviert werden. Um alle angewendeten Löschvorgänge auf ein bestimmtes Element zurückzusetzen, wird der „klar-keine“ Dienstprogramm verwendet wird. P >
div >
Körper >
Hier:
- „ float-links Die Klasse „schwebt“ das
-Element auf der linken Seite des Containers.
- „ schweben rechts Die Klasse „schwebt“ das
-Element auf der rechten Seite des Containers.
- „ klar-keine Die Klasse „deaktiviert jegliche Löschung, die auf das
-Element angewendet wird, und ermöglicht, dass das Element auf beiden Seiten schweben kann.
Ausgang
Auf der obigen Webseite ist zu beobachten, dass der Inhalt auf beiden Seiten des Containers schwebt. Dies zeigt an, dass alle angewendeten Löschvorgänge für das angegebene Element deaktiviert wurden.
Abschluss
Um alle angewendeten Löschvorgänge in Tailwind zu deaktivieren, verwenden Sie die Option „ klar-keine ” Utility-Klasse mit dem gewünschten Element im HTML-Programm. Dieses Dienstprogramm setzt alle Löschvorgänge zurück, die auf ein bestimmtes Element angewendet werden, und gibt den Standardwert an. Navigieren Sie zur Überprüfung zur Webseite und sehen Sie sich die Änderungen an. In diesem Artikel wurde das Beispiel zum Deaktivieren aller angewendeten Löschvorgänge in Tailwind CSS gezeigt.