O ' tela h ”A classe no Tailwind é usada para atribuir a altura da janela de visualização a um elemento HTML. Viewport é apenas outro nome para o tamanho da tela de um cliente. O desenvolvedor pode selecionar facilmente toda a janela de visualização com a ajuda deste “ tela h ”Classe e, em seguida, aplique várias classes Tailwind de acordo.
Este artigo fornecerá o procedimento para adicionar a altura da janela de visualização a um elemento no Tailwind usando o “ tela h ' aula.
Como definir a altura da janela de visualização de um elemento usando a classe “h-screen” no Tailwind?
Se a altura da janela de visualização for atribuída a um elemento usando o botão “ tela h ”Classe, ele ajustará automaticamente sua propriedade de altura de acordo com a tela do cliente. Para usar a altura da janela de visualização no Tailwind, siga a convenção fornecida abaixo:
< divisão aula = 'tela h' > Olá < / divisão >
Da demonstração acima, fica claro que o “ tela h ”É usado no atributo de classe do elemento junto com várias outras classes do Tailwind para projetar o layout.
Vamos criar um painel fictício e atribuir uma altura de janela de visualização à barra lateral da tela do painel.
< divisão aula = 'flexível' >
< divisão aula = 'w-56 h-screen arredondado-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Painel
< ul aula = 'texto-lg py-8 espaço-y-7' >
< que >Equipe< / que >
< que >Projetos< / que >
< que >Relatórios< / que >
< que >Documentos< / que >
< / ul >
< / divisão >
< divisão aula = 'texto centralizado text-3xl py-8 ps-5' >Bem-vindo ao Painel!< / divisão >
< / divisão >
Explicação do código:
- Primeiro um ' divisão ”O elemento é criado tendo a classe de“ flexionar ”, esta classe alinha os itens residentes em uma linha horizontal.
- Em seguida, crie outro “ divisão ”Com 8px de preenchimento superior e inferior usando o“ py-2 ”E aloque a ela uma largura fixa usando o“ w-56 ' aula. Em seguida, defina a altura do elemento para a altura da janela de visualização com o “ tela h ' aula. Os cantos do contêiner são arredondados.
- O ' bg-{cor}-{número} ”A classe é usada para fornecer uma cor de fundo ao contêiner. O ' centro de texto ”classe alinha o conteúdo do texto ao centro. A espessura da fonte do texto está definida como “ audacioso ”, e o tamanho da fonte é “ 2xl ”.
- A seguir, uma lista não ordenada “< ul >” é criado com tamanho de fonte grande e um “ 48px ”margin-top usando a classe tailwind “space-y”.
- Em seguida, quatro itens da lista são criados usando o “< que >” tags.
- Outro ' divisão ”O elemento é criado com preenchimento superior-inferior de 32px e início inline de 20px usando o“ py” e “ps ' Aulas.
A saída para o código explicado acima é a seguinte:
A partir da saída acima, fica claro que a barra lateral do painel tem a altura da janela de visualização da tela. Isso é tudo sobre o propósito do “ tela h ”Aula no Tailwind.
Conclusão
O ' tela h ”A classe no Tailwind é usada para atribuir a altura da viewport a um elemento, ou seja, a altura da tela do cliente. Usando o “ tela h ”Classe, o elemento herdará automaticamente a altura da tela. Para usar a altura da janela de visualização no Tailwind, o “ tela h ”propriedade deve ser passada como um valor para o“ aula ” atributo como “< div class= “h-tela ”>”. Este artigo forneceu o procedimento para usar o “ tela h ”Aula no Tailwind.