Tailwind CSS fornece “ claro ” utilitários que controlam o comportamento de um elemento específico quando ele está próximo a qualquer elemento flutuante. Por exemplo, as classes utilitárias “clear-left” e “clear-right” permitem que os desenvolvedores façam os elementos especificados se moverem abaixo de quaisquer elementos flutuantes à esquerda ou à direita no contêiner. No entanto, às vezes, os usuários desejam desativar qualquer limpeza aplicada a determinados elementos e permitir que apareçam ao lado dos elementos flutuantes. Em tais circunstâncias, o utilitário “clear-none” pode ser utilizado para definir o valor padrão do elemento.
Este artigo exemplificará o procedimento para desabilitar todos os clears aplicados no Tailwind CSS.
Como desabilitar todas as limpezas aplicadas no Tailwind?
Para desabilitar todos os clears aplicados no Tailwind, crie um arquivo HTML e adicione o “ claro-nenhum ” classe utilitária com o elemento desejado no programa HTML. Este utilitário redefine qualquer “clear” aplicado a um elemento específico e define o valor padrão.
Sintaxe
< elemento aula = 'claro-nenhum' > ... elemento >
Exemplo
Neste exemplo, usaremos o “ claro-nenhum ” utilitário com o “ ” para redefinir as limpezas aplicadas e permitir que ele flutue nos lados esquerdo e direito:
< corpo >
< div aula = 'h-96 mx-10 p-8 bg-sky-500' >
< img origem = 'tailwindcss_img.png' aula = 'float-esquerda p-3 w-28 h-24' tudo = 'imagem' />
< img origem = 'tailwindcss_img.png' aula = 'float-right p-3' tudo = 'imagem' />
< p aula = 'claro-nenhum' > O Tailwind CSS fornece 'claro' utilitários para controlar o agrupamento de conteúdo em torno de um elemento.
Este exemplo mostrará como desabilitar todas as limpezas aplicadas aos elementos. Para redefinir quaisquer limpezas aplicadas a um elemento específico, o 'claro-nenhum' utilitário é usado. p >
div >
corpo >
Aqui:
- “ float-esquerda ” classe flutua o elemento
para o lado esquerdo do contêiner.
- “ flutuar à direita ” classe flutua o elemento
para o lado direito do contêiner.
- “ claro-nenhum ” desativa qualquer limpeza aplicada ao elemento
e permite que o elemento flutue em ambos os lados.
Saída
Na página da web acima, pode-se observar que o conteúdo está flutuando em ambos os lados do contêiner. Isso indica que todas as limpezas aplicadas foram desativadas do elemento especificado.
Conclusão
Para desabilitar todas as limpezas aplicadas no Tailwind, utilize o botão “ claro-nenhum ” classe utilitária com o elemento desejado no programa HTML. Este utilitário redefine qualquer limpeza aplicada a um elemento específico e especifica o valor padrão. Para verificação, navegue até a página da Web e visualize as alterações. Este artigo demonstrou o exemplo para desabilitar todas as limpezas aplicadas no Tailwind CSS.