Este artigo ilustrará o método de aplicação de pontos de interrupção e consultas de mídia nos utilitários 'overflow' no Tailwind CSS.
Como utilizar pontos de interrupção e consultas de mídia com “overflow” no Tailwind?
Para aplicar pontos de interrupção específicos e consultas de mídia em utilitários de “overflow” no Tailwind, crie uma estrutura HTML. Em seguida, use o “ md ' ou ' lg ” breakpoints com o desejado “estouro-
Exemplo
Neste exemplo, usaremos o 'md' ponto de interrupção com o “overflow-scroll” utilitário no
container para adicionar as barras de rolagem a ele e sempre mostrá-las em tela de tamanho médio: < corpo >
< div aula = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS fornece vários utilitários de “overflow”, como
“overflow-auto”, “overflow-scroll”, “overflow-hidden”, “overflow-visible”
etc. Esses utilitários determinam como um elemento específico lida com o conteúdo
que exceda o tamanho do recipiente. Cada utilitário oferece funcionalidade exclusiva,
no entanto, seu objetivo final permanece o mesmo, ou seja, controlar o estouro
comportamento do elemento selecionado.
< / div >
< / corpo >
Aqui:
- O “overflow-auto” classe é usada para adicionar as barras de rolagem ao container e mostrá-los somente quando a rolagem for necessária.
- O “md:overflow-scroll” adiciona as barras de rolagem e sempre as mostra no 'md' ponto de interrupção (tela de tamanho médio).
Saída:
De acordo com a saída acima, breakpoints e media queries foram aplicados com sucesso nos utilitários de “overflow”.
Conclusão
Para aplicar pontos de interrupção e consultas de mídia em utilitários 'overflow' no Tailwind, use o ' sm ”, “ md ' ou ' lg ” breakpoints com o desejado “ estouro-