Tailwind CSS fornisce ' chiaro ” utilità che controllano il comportamento di un particolare elemento quando si trova accanto a qualsiasi elemento flottato. Ad esempio, le classi di utilità 'clear-left' e 'clear-right' consentono agli sviluppatori di far spostare gli elementi specificati sotto qualsiasi elemento mobile a sinistra o a destra nel contenitore. Tuttavia, a volte, gli utenti desiderano disabilitare qualsiasi cancellazione applicata a determinati elementi e consentire loro di apparire accanto agli elementi flottati. In tali circostanze, l'utilità 'clear-none' può essere utilizzata per definire il valore predefinito dell'elemento.
Questo articolo esemplifica la procedura per disabilitare tutte le cancellazioni applicate in Tailwind CSS.
Come disabilitare tutte le cancellazioni applicate in Tailwind?
Per disabilitare tutte le cancellazioni applicate in Tailwind, crea un file HTML e aggiungi ' chiaro-nessuno ” classe di utilità con l'elemento desiderato nel programma HTML. Questa utilità reimposta qualsiasi 'clear' applicato a un elemento specifico e definisce il valore predefinito.
Sintassi
< elemento classe = 'chiaro-nessuno' > ... elemento >
Esempio
In questo esempio, useremo il ' chiaro-nessuno ” utilità con il “ ” elemento per reimpostare le cancellazioni applicate e consentirgli di fluttuare sui lati sinistro e destro:
< corpo >
< div classe = 'h-96 mx-10 p-8 bg-cielo-500' >
< imm src = 'tailwindcss_img.png' classe = 'float-sinistra p-3 w-28 h-24' qualunque cosa = 'Immagine' />
< imm src = 'tailwindcss_img.png' classe = 'fluttuante a destra p-3' qualunque cosa = 'Immagine' />
< P classe = 'chiaro-nessuno' > Tailwind CSS fornisce 'chiaro' utilità per controllare l'avvolgimento del contenuto attorno a un elemento.
Questo esempio mostrerà come disabilitare tutte le cancellazioni applicate agli elementi. Per reimpostare eventuali cancellazioni applicate a un particolare elemento, il file 'chiaro-nessuno' viene utilizzata l'utilità. P >
div >
corpo >
Qui:
- “ float-sinistra La classe ” sposta l'elemento
sul lato sinistro del contenitore.
- “ galleggiante a destra La classe ” sposta l'elemento
sul lato destro del contenitore.
- “ chiaro-nessuno La classe ” disabilita qualsiasi cancellazione applicata all'elemento
e consente all'elemento di fluttuare su entrambi i lati.
Produzione
Nella pagina web di cui sopra, si può osservare che il contenuto fluttua su entrambi i lati del contenitore. Questo indica che tutte le cancellazioni applicate sono state disabilitate dall'elemento specificato.
Conclusione
Per disabilitare tutte le cancellazioni applicate in Tailwind, utilizzare il ' chiaro-nessuno ” classe di utilità con l'elemento desiderato nel programma HTML. Questa utilità reimposta qualsiasi cancellazione applicata a un particolare elemento e specifica il valore predefinito. Per la verifica, vai alla pagina Web e visualizza le modifiche. Questo articolo ha dimostrato l'esempio per disabilitare tutte le cancellazioni applicate in Tailwind CSS.