Visibilidade do vento de cauda: como controlar a visibilidade do elemento?

Vamos dar uma olhada na classe de visibilidade do Tailwind e aprender como usá-la para criar layouts mais flexíveis e responsivos.

Às vezes, você deseja mostrar ou ocultar elementos dependendo de certas condições, como interações do usuário ou tamanho do dispositivo.

Tailwind CSS fornece uma variedade de utilitários de visibilidade para ajudá-lo a controlar a visibilidade dos elementos HTML com facilidade.

Visibilidade do vento de cauda

Tailwind CSS usa a classe de visibilidade para controlar a visibilidade de um elemento. A classe de visibilidade no Tailwind CSS é uma poderosa classe de utilitário que nos permite controlar a visibilidade de um elemento.

Índice-

Visibilidade do vento de cauda Como controlar a visibilidade do elemento?:
- Classes de visibilidade do vento de cauda:
- Benefícios de visibilidade do vento de cauda:

Classes de visibilidade do vento de cauda

Vamos dar uma olhada nas classes de visibilidade do Tailwind abaixo:

Aulas	Visão geral
visível	Este é o valor padrão para a classe de visibilidade. Nesse caso, o elemento fica visível e será exibido na tela.
invisível	Ele oculta o elemento, mas não o remove do layout.
colapso	Ao usar o recolhimento, você pode ocultar linhas da tabela, grupos de linhas, colunas e grupos de colunas como se não fossem exibidos nenhum , mas sem afetar o tamanho de outras linhas e colunas .

Sintaxe

<element class="invisible">...</element>

Neste exemplo vamos focar na classe visible no Tailwind:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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="font-semibold text-gray-700 my-3">Visibility Class in Tailwind CSS</p>
 <p class="font-medium text-gray-500 my-3 text-sm">Using visible class</p>
 <div class="flex flex-row justify-evenly text-center font-medium mt-4"> 
  <div class="bg-amber-300 text-slate-800 w-24 h-12">1</div> 
  <div class="visible bg-red-400 w-24 h-12">2</div> 
  <div class="bg-slate-800 text-amber-200 w-24 h-12">3</div> 
  <div class="bg-blue-400 text-slate-800 w-24 h-12">4</div> 
 </div> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O uso da classe invisível do Tailwind é ilustrado no exemplo abaixo:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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="font-semibold text-gray-700 my-3">Visibility Class in Tailwind CSS</p>
 <p class="font-medium text-gray-500 my-3 text-sm">Using invisible class</p>
 <div class="flex flex-row justify-evenly text-center font-medium mt-4"> 
  <div class="bg-amber-300 text-slate-800 w-24 h-12">1</div> 
  <div class="invisible bg-red-500 w-24 h-12">2</div> 
  <div class="bg-slate-800 text-amber-200 w-24 h-12">3</div> 
  <div class="bg-blue-400 text-slate-800 w-24 h-12">4</div> 
 </div> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo abaixo é usado para a demonstração da classe de colapso 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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="font-semibold text-gray-700 my-3">Visibility Class in Tailwind CSS</p>
 <p class="font-medium text-gray-500 my-3 text-sm">Using collapse class</p>
<div class="relative overflow-x-auto mt-4">
 <table class="w-full text-sm text-left text-gray-500">
  <thead class="text-xs text-gray-600 uppercase bg-gray-100">
   <tr>
    <th scope="col" class="px-6 py-3">
        Product name
    </th>
    <th scope="col" class="px-6 py-3">
        Color
    </th>
    <th scope="col" class="px-6 py-3">
        Category
    </th>
    <th scope="col" class="px-6 py-3">
        Price
    </th>
   </tr>
  </thead>
  <tbody>
   <tr class="bg-white border-b collapse">
    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
        Apple MacBook Pro
    </th>
    <td class="px-6 py-4">
        Silver
    </td>
    <td class="px-6 py-4">
        Laptop
    </td>
    <td class="px-6 py-4">
        $2999
    </td>
   </tr>
   <tr class="bg-white border-b">
    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
        Dell Latitude
    </th>
    <td class="px-6 py-4">
        Black
    </td>
    <td class="px-6 py-4">
        Laptop PC
    </td>
    <td class="px-6 py-4">
        $1999
    </td>
   </tr>
  </tbody>
 </table>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Benefícios de visibilidade do vento de cauda

Os benefícios de usar os utilitários Tailwind Visibility são numerosos.

Ao usar esses utilitários, você pode controlar facilmente a visibilidade dos elementos HTML em seu site sem precisar escrever CSS personalizado. Isso pode economizar muito tempo e esforço no processo de design da web.

Além disso, você pode usar as classes Tailwind Visibility para criar layouts responsivos, pois pode mostrar ou ocultar elementos com base no tamanho da tela ou dispositivo.

Isso significa que seu site pode fornecer uma experiência de usuário consistente em diferentes dispositivos e tamanhos de tela. Além disso, o uso de classes Tailwind Visibility pode tornar seu site mais acessível a usuários com deficiências , pois você pode fornecer conteúdo alternativo acessível a leitores de tela.

Nós valorizamos o seu feedback.

Visibilidade do vento de cauda: como controlar a visibilidade do elemento?

Classes de visibilidade do vento de cauda

Sintaxe

Example:

Example:

Example:

Benefícios de visibilidade do vento de cauda

Sentindo entediado?