Este artigo exemplificará o método de aplicação de breakpoints e media queries nos utilitários “clear” no Tailwind.
Como utilizar pontos de interrupção e consultas de mídia em “clear” no Tailwind?
Para aplicar pontos de interrupção específicos e consultas de mídia em utilitários “limpos” no Tailwind, crie uma estrutura HTML. Em seguida, defina o valor desejado para o “ limpar-
Exemplo
Neste exemplo, usaremos o “ md ” ponto de interrupção com o “ limpar ambos ” utilitário e “ lg ” ponto de interrupção com o “ claro-nenhum ” utilitário no “ ” elemento para mudar sua posição em tamanho de tela médio e grande:
< 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 = 'texto-justificar clear-left md:clear-both lg:clear-none' > Tailwind CSS fornece utilitários 'floats' para controlar o agrupamento de conteúdo em torno de um elemento.
Este exemplo mostrará como usar pontos de interrupção e consultas de mídia com o utilitário 'clear' no Tailwind. < / p >
< / div >
< / corpo >
Aqui:
- “flutuar-esquerda” classe flutua os elementos para o lado esquerdo do contêiner.
- “flutuar para a direita” classe flutua os elementos para o lado direito do contêiner.
- “claro-esquerda” A classe move o elemento
abaixo do elemento flutuante à esquerda no contêiner.
- “md:limpar-ambos” class limpa os flutuadores esquerdo e direito e posiciona o elemento
abaixo deles em tela de tamanho médio.
- “lg:claro-nenhum” A classe desativa qualquer limpeza aplicada ao elemento
e permite que o elemento flutue em ambos os lados do contêiner em uma tela grande.
Saída
De acordo com a saída acima, os pontos de interrupção e consultas de mídia especificados foram aplicados com sucesso ao utilitário “clear”.
Conclusão
Para aplicar pontos de interrupção e consultas de mídia em utilitários “limpos” no Tailwind, defina o valor desejado para o “ limpar-