Este artigo demonstrará o método para utilizar o “break-after” com pontos de interrupção e consultas de mídia no Tailwind CSS.
Como utilizar o “break-after” com pontos de interrupção e consultas de mídia no Tailwind?
Para utilizar um “break-after” com pontos de interrupção e consultas de mídia, defina diferentes valores e estilos para diferentes tamanhos de tela com o utilitário “break-after” no programa HTML. Em seguida, verifique a saída visualizando a página da Web em HTML.
Vamos explorar a implementação prática:
Etapa 1: Use pontos de interrupção e consultas de mídia com o utilitário “break-after”
Crie um programa HTML e especifique diferentes valores e estilos para diferentes tamanhos de tela com o utilitário “break-after”. Por exemplo, usamos o “ md ” ponto de interrupção com o “ quebra após coluna ” utilitário e o “ lg ” ponto de interrupção com o “ break-after-evitar ' Utilitário:
< corpo >
< div aula = 'colunas-2 bg-teal-400' >
< p aula = 'md:quebra-após-coluna lg:quebra-após-evitar' > Olá... < / p >
< p > Bem vindo aqui... < / p >
< p > Saiba mais sobre Tailwind CSS... < / p >
< p > É um framework CSS... < / p >
< p > Tchau... < / p >
< / div >
< / corpo >
Aqui:
- O ' md: quebra após coluna ” classe indica que uma quebra de coluna deve ocorrer após este elemento
específico no “ md ” breakpoint (tela de tamanho médio).
- O ' lg:break-after-evitar ” sugere que o elemento deve evitar o break-after no “ lg ” ponto de interrupção (tamanho de tela grande).
Etapa 2: verificar a saída
Verifique se os pontos de interrupção e consultas de mídia foram aplicados visualizando a página da Web em HTML:
Na página da Web acima, a quebra de coluna ocorreu no elemento especificado na tela média e a quebra posterior foi evitada na tela grande.
Conclusão
Para utilizar o “break-after” com pontos de interrupção e consultas de mídia no Tailwind, primeiro crie um arquivo HTML. Em seguida, use os pontos de interrupção e consultas de mídia com o utilitário “break-after” especificando diferentes valores e estilos para diferentes tamanhos de tela. Para verificação, execute o programa HTML e visualize a página da web. Este artigo demonstrou o método para utilizar o “break-after” com pontos de interrupção e consultas de mídia no Tailwind CSS.