Guia rápido para a altura máxima do vento de cauda
Neste guia abrangente, vamos nos aprofundar na altura máxima do Tailwind com exemplos. Essa propriedade desempenha um papel crítico na criação de layouts da Web responsivos e visualmente atraentes.
Explicaremos em detalhes o que é altura máxima, como funciona e como pode ser usado com o Tailwind.
Ao final deste artigo, você terá uma compreensão sólida de como usar o Tailwind max-height para criar sites impressionantes e funcionais.
O que é Altura Máxima?
Altura máxima é uma propriedade CSS que define a altura máxima de um elemento.
O valor de altura máxima é definido em pixels, ems, rems ou porcentagens.
Quando o conteúdo de um elemento excede seu valor de altura máxima, a propriedade overflow determina como o excesso de conteúdo é exibido.
Altura máxima do vento de cauda
A classe max-height no Tailwind CSS permite que você defina uma altura máxima para um elemento HTML.
Ele restringe a altura do elemento para não exceder o valor especificado, o que é particularmente útil quando você precisa limitar a altura de um elemento, mas ainda deseja que ele responda e se adapte ao seu conteúdo.
Também é útil para limitar o tamanho de imagens, vídeos e outras mídias.
Ao definir um valor de altura máxima, você pode garantir que a mídia se encaixe no design sem ser cortada ou distorcida.
Classes de altura máxima:
| Aulas | Visão geral |
| max-h-0 | Esta classe é usada para definir a altura máxima de um elemento como zero. |
| max-h-px | A altura máxima de um elemento é definida como 1px. |
| máx-h-0,5 | Usando esta classe, a altura máxima é definida como 0,125 rem ou 2px. |
| max-h-1 | A altura máxima é definida como 0,25rem ou 4px. |
| máx-h-1,5 | A altura máxima de um elemento pode ser definida como 0,375 rem ou 6px usando esta classe. |
| max-h-2 | Ao usar esta classe, uma altura máxima de 0,5 rem ou 8px pode ser definida em um elemento. |
| máx-h-2,5 | A altura máxima de um elemento é definida como 0,625 rem ou 10px usando esta classe. |
| max-h-3 | Usando esta classe, podemos definir a altura máxima de um elemento para 0,75 rem ou 12px. |
| máx-h-3,5 | A altura máxima de um elemento é definida como 0,875 rem ou 14px. |
| max-h-4 | Esta classe é usada para definir a altura máxima de um elemento para 1rem ou 16px. |
| max-h-5 | Ele define a altura máxima de um elemento para 1,25 rem (20px). |
| max-h-6 | Esta classe define a altura máxima de um elemento como 1,5 rem ou 24px. |
| max-h-7 | Usando esta classe, a altura máxima de um elemento é especificada como 1,75 rem ou 28px. |
| max-h-8 | Ao usar esta classe, uma altura máxima de 2rem ou 32px pode ser definida em um elemento. |
| max-h-9 | Esta classe é usada para definir a altura máxima de um elemento para 2,25 rem ou 36px. |
| max-h-10 | A altura máxima de um elemento é definida como 2,5 rem ou 40px. |
| max-h-11 | A altura máxima é definida como 2,75 rem ou 44px. |
| max-h-12 | A altura máxima é especificada como 3rem ou 48px. |
| max-h-14 | Esta classe define a altura máxima de um elemento como 3,5 rem ou 56px. |
| max-h-16 | A altura máxima de um elemento é definida como 4rem ou 64px usando esta classe. |
| max-h-20 | Usando esta classe, podemos definir a altura máxima de um elemento para 5rem ou 80px. |
| max-h-24 | Esta classe é aplicada para definir a altura máxima para 6rem ou 96px. |
| max-h-28 | A altura máxima de um elemento é definida como 7rem ou 112px. |
| max-h-32 | Usando esta classe, a altura máxima de um elemento é especificada como 8rem ou 128px. |
| max-h-36 | Esta classe é usada para definir a altura máxima de um elemento para 9rem ou 144px. |
| max-h-40 | A altura máxima de um elemento é definida como 10rem ou 160px. |
| max-h-44 | Esta classe define a altura máxima de um elemento como 11rem ou 176px. |
| max-h-48 | Esta classe é aplicada para definir a altura máxima para 12rem ou 192px. |
| max-h-52 | A altura máxima de um elemento é especificada como 13rem ou 208px. |
| max-h-56 | Usado para definir a altura máxima como 14rem ou 224px. |
| max-h-60 | A altura máxima de um elemento é definida como 15rem ou 240px. |
| max-h-64 | Usando esta classe, uma altura máxima de 16rem ou 256px pode ser definida em um elemento. |
| max-h-72 | Usando esta classe, a altura máxima de um elemento é especificada como 18rem ou 288px. |
| max-h-80 | Esta classe é usada para definir a altura máxima de um elemento como 20rem ou 320px. |
| max-h-96 | Define a altura máxima de um elemento como 24rem ou 384px. |
| máximo-h-nenhum | Neste caso, o valor máximo da altura não é definido. |
| max-h-cheio | A altura máxima de um elemento é 100% da altura de seu contêiner pai. |
| max-h-screen | A altura máxima é definida como a altura da viewport. |
| max-h-min | A altura máxima é definida para o conteúdo mínimo ocupado. |
| max-h-max | A altura máxima é definida de forma que o conteúdo máximo seja coberto. |
| max-h-fit | A altura máxima é definida de forma a caber em todo o conteúdo. |
Como usar a altura máxima do Tailwind?
No Tailwind, você pode usar a propriedade max-h para definir a altura máxima de um elemento.
A propriedade max-h pode ser usada em combinação com outras propriedades de dimensionamento e layout para criar designs personalizados.
Veja como usar a propriedade max-h no Tailwind:
Sintaxe
<element class="max-h-0">...</element>
Na sintaxe acima, a classe max-h-0 define a altura máxima de um elemento para 0px.
Você também pode usar outras unidades de medida, como ems ou porcentagens, alterando o valor da propriedade max-h.
A altura máxima do Tailwind pode ser usada em combinação com outras propriedades responsivas para criar designs com ótima aparência em todos os dispositivos.
O exemplo a seguir inclui a demonstração de algumas classes de propriedade de altura máxima do Tailwind:
Example:
Exemplo de Explicação
O exemplo acima demonstra como a propriedade de altura máxima do Tailwind pode ser usada em combinação com outras classes do Tailwind para criar um web design visualmente atraente e responsivo.
Ele inclui um elemento div com uma classe de “ bg-gray-200 p-8 space-y-12 font-medium ”, que aplica alguma cor de fundo, preenchimento e espaçamento ao conteúdo interno.
Dentro deste div, existem mais quatro divs com diferentes classes de altura máxima ( max-h-0, max-h-2, max-h-4 e max-h-8) .
Cada um desses divs tem uma cor de fundo cinza e cantos arredondados .
A propriedade max-height limita a altura de cada div a um valor específico, criando um layout consistente e visualmente atraente.
Abaixo está outro exemplo que demonstra como a propriedade max-height do Tailwind pode ser utilizada com algumas das classes disponíveis:
