Altura do vento de cauda: tudo o que você precisa saber

Neste artigo, exploraremos as classes de altura do Tailwind e como usá-las em seus projetos com exemplos.

A propriedade height é usada para definir a altura de um elemento, como uma tag <div> ou <img> .

A altura de um elemento pode ser especificada usando unidades absolutas ou relativas.

Altura do vento de cauda

Essas classes são baseadas em uma convenção de nomenclatura simples que começa com o prefixo h- seguido por um número que representa a altura em pixels .

Sintaxe

<element class="h-40">...</element>

Tailwind fornece várias classes que você pode usar para definir a altura de um elemento sem precisar escrever CSS personalizado.

Índice-

Classes de altura do vento de cauda

A seguir estão algumas das classes de altura do Tailwind mais usadas:

Aulas Visão geral
h-0 A altura é definida como zero.
h-px Equivalente à altura CSS personalizada 1px.
h-0,5 Esta classe define a altura de um elemento como 0,125rem ou 2px.
h-1 Uma altura de 0,25rem ou 4px é definida por esta classe.
h-1,5 Usando esta classe, a altura de um elemento é definida como 0,375rem ou 6px.
h-2 A altura de um elemento nesta classe é 0,5 rem ou 8 pixels.
h-2,5 Os elementos que usam esta classe têm uma altura de 0,625rem (10px).
h-3 A altura de um elemento é especificada como 0,75 rem ou 12px.
h-3,5 Essa classe define a altura de um elemento como 0,875 rem ou 14 px.
h-4 Usando esta classe, você pode definir a altura de um elemento para 1rem ou 16px.
h-5 Usando esta classe, um elemento terá uma altura de 1,25 rem ou 20 pixels.
h-6 Neste caso, o elemento terá uma altura de 1,5rem ou 24px.
h-7 Esta classe define a altura de um elemento para 1,75 rem ou 28px.
h-8 A altura de um elemento é definida como 2rem ou 32px com esta classe.
h-9 Uma altura de 2,25 rem ou 36px é aplicada a um elemento usando esta classe.
h-10 Esta classe define a altura de um elemento para 2,5 rem (40px).
h-11 Quando esta classe é usada, a altura de um elemento é definida como 44px ou 2,75rem.
h-12 Uma classe com este nome define a altura de um elemento para 3rem ou 48px.
h-14 Ele define a altura de um elemento para 3,5 rem ou 56px.
h-16 A altura de um elemento é definida como 4rem ou 64px usando esta classe.
h-20 Usando esta classe, a altura de um elemento é definida como 5rem ou 80px.
h-24 Esta classe define a altura de um elemento como 6rem ou 96px.
h-28 Um elemento usando esta classe tem uma altura de 7rem ou 112px.
h-32 A altura de um elemento é 8rem, ou 128px, quando esta classe é aplicada.
h-36 Esta classe aplica uma altura de 9rem ou 144px a um elemento.
h-40 Usando esta classe, um elemento terá uma altura de 10rem ou 160px.
h-44 Esta classe especifica a altura de um elemento como 11rem ou 176px.
h-48 Uma altura de 12rem ou 192px é especificada por esta classe.
h-52 Um elemento com esta classe tem uma altura de 13rem ou 208px.
h-56 Os elementos nesta classe são definidos para ter uma altura de 14rem ou 224px.
h-60 Usando esta classe, um elemento tem uma altura de 15rem ou 240px.
h-64 Os elementos que usam esta classe têm uma altura de 16rem ou 256px.
h-72 Usando esta classe, os elementos são especificados como 18rem ou 288px de altura.
h-80 A altura de um elemento é especificada como 20rem ou 320px.
h-96 Uma altura de 24rem ou 384px é definida por esta classe.
h-auto Essa classe define a altura de um elemento para seu tamanho automático padrão com base em seu conteúdo.
h-1/2 Essa classe define a altura de um elemento para 50% da altura de seu contêiner pai.
h-1/3 Nesta classe, a altura de um elemento é definida como 33,33% da altura de seu contêiner pai.
h-2/3 Um elemento com esta classe tem uma altura de 66,67% de seu contêiner pai.
h-1/4 Os elementos dessa classe têm uma altura de 25% de seus contêineres pais.
h-2/4 Essa classe define a altura de um elemento para 50% da altura de seu contêiner pai.
h-3/4 A altura de um elemento nesta classe é definida como 75% da altura de seu contêiner pai.
h-1/5 Um elemento dessa classe tem uma altura que é 20% da altura de seu contêiner pai.
h-2/5 A altura do elemento é definida como 40% da altura do contêiner pai.
h-3/5 A altura do elemento será definida como 60% da altura de seu contêiner pai.
h-4/5 Usando esta classe, os elementos são definidos para 80% da altura do contêiner pai.
h-1/6 Essa classe define a altura de um elemento para 16,67% da altura de seu contêiner pai.
h-2/6 Nesta classe, a altura de um elemento é definida como 33,33% da altura de seu contêiner pai.
h-3/6 Essa classe define a altura de um elemento para 50% da altura de seu contêiner pai.
h-4/6 A altura de um elemento é definida como 66,67% da altura de seu contêiner pai de acordo com esta classe.
h-5/6 Essa classe define a altura de um elemento para 83,33% da altura de seu contêiner pai.
h-cheio Essa classe define a altura de um elemento como 100% da altura de seu contêiner pai.
tela h Esta classe especifica a altura de um elemento igual à altura da tela .
h-min Isso definirá a altura de um elemento para a altura mínima necessária para conter seu conteúdo.
h-max Isso definirá a altura do elemento para a altura máxima necessária para conter seu conteúdo.
h-fit A altura de um elemento será ajustada com base na altura do conteúdo do elemento.

unidades absolutas

Unidades absolutas são unidades de medida em CSS que não são baseadas no tamanho relativo de outros elementos.

Eles têm valores fixos e permanecem constantes independentemente do tamanho ou das dimensões da viewport ou de outros elementos da página.

As unidades absolutas mais comuns são pixels ( px ), pontos ( pt ), polegadas ( in ), centímetros ( cm ) e milímetros ( mm ).

O exemplo abaixo demonstra o uso do utilitário de altura Tailwind usando unidades absolutas :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using height utility in Tailwind CSS</p>
<p class="font-medium my-4 text-gray-500 text-sm">Using absolute units</p>
<div class="flex flex-wrap-reverse p-4
space-x-2 h-64 bg-gray-200 font-medium rounded">
<div class="h-8 w-12 bg-gray-400
rounded-lg">h-8</div>
<div class="h-12 w-12 bg-gray-400
rounded-lg">h-12</div>
<div class="h-16 w-12 bg-gray-400
rounded-lg">h-16</div>
<div class="h-20 w-12 bg-gray-400
rounded-lg">h-20</div>
<div class="h-24 w-12 bg-gray-400
rounded-lg">h-24</div>
<div class="h-32 w-12 bg-gray-400
rounded-lg">h-32</div>
<div class="h-40 w-12 bg-gray-400
rounded-lg">h-40</div>
<div class="h-48 w-12 bg-gray-400
rounded-lg">h-48</div>
<div class="h-52 w-12 bg-gray-400
rounded-lg">h-52</div>
<div class="h-56 w-12 bg-gray-400
rounded-lg">h-56</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

unidades relativas

Unidades relativas são unidades CSS relativas a outra propriedade ou valor, geralmente o tamanho da fonte do elemento ou a largura de seu contêiner pai.

Eles são particularmente úteis para criar designs flexíveis e responsivos que se adaptam a diferentes tamanhos de tela e dispositivos.

Sintaxe

<element class="h-2/3">...</element>

Este exemplo ilustra o caso de uso da propriedade Tailwind height usando unidades relativas :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using height utility in Tailwind CSS</p>
<p class="font-medium my-4 text-gray-500 text-sm">Using relative units</p>
<div class="flex flex-wrap-reverse p-4
space-x-2 h-64 bg-gray-200 font-medium rounded">
<div class="h-1/3 w-12 bg-gray-400
rounded-lg">h-1/3</div>
<div class="h-2/3 w-12 bg-gray-400
rounded-lg">h-2/3</div>
<div class="h-1/2 w-12 bg-gray-400
rounded-lg">h-1/2</div>
<div class="h-3/4 w-12 bg-gray-400
rounded-lg">h-3/4</div>
<div class="h-5/6 w-12 bg-gray-400
rounded-lg">h-5/6</div>
<div class="h-3/6 w-12 bg-gray-400
rounded-lg">h-3/6</div>
<div class="h-4/6 w-12 bg-gray-400
rounded-lg">h-4/6</div>
<div class="h-3/5 w-12 bg-gray-400
rounded-lg">h-3/5</div>
<div class="h-4/5 w-12 bg-gray-400
rounded-lg">h-4/5</div>
<div class="h-2/4 w-12 bg-gray-400
rounded-lg">h-2/4</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
No exemplo a seguir, algumas unidades relativas que não foram incluídas no exemplo anterior são usadas:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Using height utility in Tailwind CSS</p>
<p class="font-medium my-4 text-gray-500 text-sm">Using relative units</p>
<div class="flex flex-wrap-reverse p-4
space-x-2 h-64 bg-gray-200 font-medium rounded">
<div class="h-full w-12 bg-gray-400
rounded-lg">h-full</div>
<div class="h-min w-12 bg-gray-400
rounded-lg">h-min</div>
<div class="h-max w-12 bg-gray-400
rounded-lg">h-max</div>
<div class="h-auto w-12 bg-gray-400
rounded-lg">h-auto</div>
<div class="h-fit w-12 bg-gray-400
rounded-lg">h-fit</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.