No Tailwind CSS, o “ quebra-decoração-caixa ” determina a renderização do plano de fundo, borda e preenchimento de um elemento quando ele abrange várias linhas ou colunas. Ele tem duas classes, ou seja, “ fatiar ' e ' clone ”. Os usuários podem usar a propriedade “box-decoration-break” com pontos de interrupção e consultas de mídia para determinar como o layout e a aparência dos elementos mudam dependendo da largura do dispositivo e aplicar estilos diferentes com base nos pontos de interrupção.
Este artigo demonstrará o método de usar quebra de decoração de caixa com pontos de interrupção e consultas de mídia.
Como usar a quebra de decoração de caixa com pontos de interrupção e consultas de mídia no Tailwind?
Para usar uma quebra de decoração de caixa com pontos de interrupção e consultas de mídia, é necessário definir diferentes valores e estilos para diferentes tamanhos de tela no programa HTML. Em seguida, visualize a página da Web executando o programa HTML para verificação.
Para um melhor entendimento, confira os passos abaixo mencionados:
Etapa 1: usar pontos de interrupção e consultas de mídia com quebra de decoração de caixa
Crie um programa HTML e especifique diferentes valores e estilo para diferentes tamanhos de tela. Por exemplo, definimos “ md ' e ' lg ” pontos de interrupção com seus estilos:
< corpo >< período aula = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Olá < br />
Linux < br />
Dica
período >
corpo >
Aqui:
- “ bg-teal-600 ” define a cor azul-petróleo para o fundo.
- “ caixa-decoração-clone ” é uma classe personalizada usada para clonar a decoração da caixa.
- “ md:bg-yellow-500 ” aplica uma cor de fundo amarela ao elemento para o “ md ” ponto de interrupção (telas de tamanho médio).
- “ lg:box-decoration-slice ” define um efeito de corte para a decoração da caixa para o “ lg ” breakpoint (telas grandes).
- “ texto em branco ” define a cor branca para o texto.
- “ texto-3xl ” define o tamanho da fonte para 3xl.
- “ px-2 ” adiciona um preenchimento horizontal de 2 pixels ao elemento .
Etapa 2: verificar a saída
Para garantir que os pontos de interrupção e as consultas de mídia tenham sido aplicados com êxito, execute o programa HTML e visualize a página da Web:
Pode-se ver que a página da web está mudando de acordo com a qual os pontos de interrupção e consultas de mídia foram definidos.
Conclusão
Para usar uma quebra de decoração de caixa 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 no programa HTML especificando valores e estilos diferentes para tamanhos de tela diferentes. Para verificação, execute o programa HTML e visualize a página da web. Este artigo demonstrou o método de usar quebra de decoração de caixa com pontos de interrupção e consultas de mídia.