Tailwind CSS biedt “ duidelijk ” hulpprogramma's die het gedrag van een bepaald element regelen wanneer het zich naast een zwevend element bevindt. De hulpprogrammaklassen 'clear-left' en 'clear-right' stellen ontwikkelaars bijvoorbeeld in staat om de gespecificeerde elementen onder alle links- of rechts-zwevende elementen in de container te laten bewegen. Soms willen gebruikers echter elke duidelijke toepassing op bepaalde elementen uitschakelen en toestaan dat ze naast de zwevende elementen verschijnen. In dergelijke omstandigheden kan het hulpprogramma 'clear-none' worden gebruikt om de standaardwaarde van het element te definiëren.
Dit artikel illustreert de procedure om alle toegepaste clears in Tailwind CSS uit te schakelen.
Hoe alle toegepaste clears in Tailwind uitschakelen?
Om alle toegepaste clears in Tailwind uit te schakelen, maakt u een HTML-bestand en voegt u de duidelijk-geen ” utility class met het gewenste element in het HTML-programma. Dit hulpprogramma reset elke 'clear' die is toegepast op een specifiek element en definieert de standaardwaarde.
Syntaxis
< element klas = 'wissen-geen' > ... element >
Voorbeeld
In dit voorbeeld gebruiken we de ' duidelijk-geen ” hulpprogramma met de “ ”-element om toegepaste clears te resetten en aan de linker- en rechterkant te laten zweven:
< lichaam >
< div klas = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'staartwindcss_img.png' klas = 'float-links p-3 w-28 h-24' alles = 'afbeelding' />
< img src = 'staartwindcss_img.png' klas = 'zwevend-rechts p-3' alles = 'afbeelding' />
< P klas = 'wissen-geen' > Tailwind CSS biedt 'duidelijk' hulpprogramma's om de verpakking van inhoud rond een element te regelen.
Dit voorbeeld laat zien hoe u alle toegepaste clears op elementen uitschakelt. Om toegepaste clears naar een bepaald element te resetten, de 'wissen-geen' hulpprogramma wordt gebruikt. P >
div >
lichaam >
Hier:
- “ float-links ” klasse laat het
element naar de linkerkant van de container drijven.
- “ vlotter-rechts ” klasse drijft het
element naar de rechterkant van de container.
- “ duidelijk-geen ” class schakelt elke clear toegepast op het
element uit en laat het element aan beide kanten zweven.
Uitgang
Op de bovenstaande webpagina is te zien dat de inhoud aan beide zijden van de container zweeft. Dit geeft aan dat alle toegepaste clears zijn uitgeschakeld voor het opgegeven element.
Conclusie
Om alle toegepaste clears in Tailwind uit te schakelen, gebruikt u de ' duidelijk-geen ” utility class met het gewenste element in het HTML-programma. Dit hulpprogramma reset elke clear die op een bepaald element is toegepast en specificeert de standaardwaarde. Navigeer voor verificatie naar de webpagina en bekijk de wijzigingen. Dit artikel heeft het voorbeeld gedemonstreerd om alle toegepaste clears in Tailwind CSS uit te schakelen.