Guia abrangente para a escala Tailwind
Neste artigo, aprenderemos como utilizar a propriedade de escala do Tailwind e suas classes através de alguns exemplos.
O que é a escala Tailwind?
Tailwind Scale é uma classe que permite ajustar o tamanho dos elementos em seu design de maneira consistente e proporcional.
Em vez de ajustar manualmente a altura e a largura de cada elemento, você pode usar a classe de escala para dimensionar o elemento para cima ou para baixo enquanto mantém sua proporção.
A classe de escala faz parte da transformação do Tailwind e funciona usando a propriedade de transformação do CSS.
A classe de escala aceita valores de 0 a 100, com 0 sendo completamente reduzido e 100 sendo o tamanho original do elemento.
Índice-
Classes de escala de vento de cauda
Existem inúmeras classes utilitárias disponíveis no Tailwind para dimensionar um elemento:
| Aulas | Visão geral |
| escala-0 | No layout, essa classe oculta um elemento completamente definindo suas escalas vertical e horizontal como zero, mas ainda ocupa espaço. |
| escala-x-0 | Um elemento é totalmente oculto definindo suas escalas horizontais como zero, mas ainda ocupa espaço no layout. |
| escala-y-0 | Essa classe é usada para ocultar um elemento definindo suas escalas verticais em zero, mas ainda ocupa espaço. |
| escala-50 | Nesse caso, um elemento é reduzido para 50% de seu tamanho original em ambas as dimensões. |
| escala-x-50 | Essa classe garante que um elemento seja dimensionado horizontalmente para 50% de seu tamanho original. |
| escala-y-50 | Usando esta classe, um elemento é dimensionado verticalmente em 50% de seu tamanho real. |
| escala-75 | Um fator de escala de 75% é aplicado a um elemento em ambas as dimensões usando esta classe. |
| escala-x-75 | Um elemento é escalado horizontalmente em 75% usando esta classe. |
| escala-y-75 | Usado para dimensionar verticalmente um elemento em 75%. |
| escala-90 | Esta classe é usada para aplicar uma transformação de escala de 90% a um elemento. |
| escala-x-90 | Usando esta classe, um elemento é escalado 90% horizontalmente. |
| escala-y-90 | Neste caso, a escala vertical de 90% é aplicada a um elemento. |
| escala-95 | Usando esta classe, podemos dimensionar um elemento em 95%. |
| escala-x-95 | Um elemento é dimensionado horizontalmente em 95%. |
| escala-y-95 | Uma escala vertical de 95% é aplicada a um elemento. |
| escala-100 | O elemento não é ampliado ou reduzido e as dimensões originais são restauradas. Este é o valor padrão. |
| escala-x-100 | A escala horizontal é redefinida e o elemento ocupa a largura original. |
| escala-y-100 | A escala vertical de um elemento é definida como padrão e o elemento cobre sua altura real. |
| escala-105 | Um elemento é dimensionado em 105% usando esta classe. |
| escala-x-105 | Usando esta classe, um elemento é dimensionado horizontalmente em 105%. |
| escala-y-105 | Ao usar esta classe, uma escala vertical de 105% é aplicada a um elemento. |
| escala-110 | Esta classe é usada para aplicar uma escala de 110% em ambos os eixos. |
| escala-x-110 | Um elemento é dimensionado em 110% ao longo do eixo x. |
| escala-y-110 | Essa classe ajuda a dimensionar um elemento em 110% ao longo do eixo y. |
| escala-125 | Nesse caso, um elemento é dimensionado em 125% em relação ao seu tamanho real. |
| escala-x-125 | Usado para escalar horizontalmente um elemento em 125%. |
| escala-y-125 | Esta classe é usada para escalar verticalmente um elemento em 125%. |
| escala-150 | Um fator de escala de 150% é aplicado a um elemento. |
| escala-x-150 | Um elemento é dimensionado em 150% ao longo do eixo x. |
| escala-y-150 | Nesse caso, um elemento é dimensionado em 150%, ao longo do eixo y. |
Sintaxe
<element class="scale-125">...</element>
Para usar o Tailwind Scale, você pode adicionar a classe scale-{percentage} a qualquer elemento em seu HTML .
Vamos dar uma olhada em um exemplo que cobre algumas classes de escala usadas para dimensionar elementos em ambas as dimensões.
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Scale class in Tailwind CSS
class="font-medium text-gray-500 my-2"Hover on the images to view the styling applied
class="bg-gray-300 p-8 justify-between grid grid-flow-col gap-4"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-50" title="scale-50" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-90" title="scale-90" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-100" title="scale-100" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-150" title="scale-150" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
É importante ter em mente que dimensionar muito um elemento pode resultar em perda de qualidade de imagem ou legibilidade do texto.
O exemplo a seguir é usado para demonstrar classes utilitárias de escala que ajudam no dimensionamento de elementos ao longo de um único eixo:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Scale class in Tailwind CSS
class="font-medium text-gray-500 my-2"Hover on the images to view the styling applied
class="bg-gray-300 p-8 justify-between grid grid-flow-col gap-4"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-75" title="scale-75" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-95" title="scale-95" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-110" title="scale-110" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
class="bg-no-repeat bg-cover bg-center w-24 h-24 scale-125" title="scale-125" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp)"
Também é importante considerar como o dimensionamento de um elemento pode afetar o layout do seu design e sua aparência em diferentes dispositivos.
Benefícios da escala Tailwind
O uso do Tailwind Scale tem vários benefícios, incluindo:
- Ao usar a classe de escala, você pode garantir que os elementos em seu design sejam dimensionados de forma proporcional e consistente, o que pode ajudar a criar uma aparência coesa e polida.
- Em vez de ajustar manualmente a altura e a largura de cada elemento, você pode usar a classe de escala para ajustar rapidamente o tamanho de um elemento de maneira fácil de manter e atualizar.
- A classe de escala pode ser usada em uma variedade de elementos, incluindo imagens, texto e contêineres, o que oferece flexibilidade para ajustar o tamanho de diferentes elementos em seu design.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
