Tailwind Redimensionar

Neste artigo, entendemos melhor o redimensionamento do Tailwind e suas classes com exemplos.

A propriedade resize no Tailwind CSS fornece uma maneira simples e flexível de controlar o comportamento de redimensionamento de elementos em sua página da web.

Tailwind Redimensionar



O que é redimensionamento do Tailwind?

O Tailwind Resize é um recurso que permite especificar como um elemento deve se comportar quando o usuário redimensiona a janela do navegador ou altera a orientação do dispositivo.

Ele fornece um conjunto de classes responsivas que você pode usar para controlar o tamanho, a posição e outras propriedades de um elemento com base na largura da viewport.

Não se aplica a elementos inline ou elementos de bloco específicos onde o estouro é visível.

No CSS tradicional, conseguimos isso usando a propriedade de redimensionamento do CSS.


Redimensionar classes:

Aulas Visão geral
redimensionar-nenhum Ao definir esse valor, os usuários não poderão redimensionar um elemento.
redimensionar Usando esta classe, o redimensionamento vertical é habilitado, mas o redimensionamento horizontal é desabilitado.
redimensionar-x Esta classe habilita o redimensionamento horizontal, mas desabilita o redimensionamento vertical do elemento.
redimensionar É possível redimensionar um elemento horizontal e verticalmente usando esta classe.

Sintaxe

<element class="resize-none">...</element>

O exemplo abaixo mostra a implementação das classes resize e resize-y no Tailwind:

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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Resize class in Tailwind CSS</p>
<div class="mt-4 bg-gray-200 w-full font-medium p-2 rounded">
<div class="flex justify-center items-center gap-2 font-medium mt-2">
<p>resize:</p>
<textarea class="resize border rounded-md
w-48 h-20 p-1 bg-gray-50"></textarea>
</div>
<div class="flex justify-center items-center gap-2 font-medium mt-2">
<p>resize-y:</p>
<textarea class="resize-y border rounded-md
w-48 h-20 p-1 bg-gray-50"></textarea>
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
O exemplo a seguir aborda as classes resize-x e resize-none no Tailwind:

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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Resize class in Tailwind CSS</p>
<div class="mt-4 bg-gray-200 w-full font-medium p-2 rounded">
<div class="flex justify-center items-center gap-2 font-medium mt-2">
<p>resize-x:</p>
<textarea class="resize-x border rounded-md
w-48 h-20 p-1 bg-gray-50"></textarea>
</div>
<div class="flex justify-center items-center gap-2 font-medium mt-2">
<p>resize-none:</p>
<textarea class="resize-none border rounded-md
w-48 h-20 p-1 bg-gray-50"></textarea>
</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