1. Макет
  2. visibility

Макет

visibility

Утилиты для управления видимостью элемента.

ClassStyles
visible
visibility: visible;
invisible
visibility: hidden;
collapse
visibility: collapse;

Примеры

Скрытие элементов

Используйте утилиту invisible для скрытия элемента, но с сохранением его места в документе, что влияет на макет других элементов:

01
03
<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="invisible ...">02</div>  <div>03</div></div>

Для полного удаления элемента из документа используйте свойство display вместо этого.

Сворачивание элементов

Используйте утилиту collapse для скрытия строк таблицы, групп строк, столбцов и групп столбцов так, как если бы они были установлены в display: none, но без влияния на размер других строк и столбцов:

Показаны все строки
Счет #КлиентСумма
#100Pendant Publishing$2,000.00
#101Kruger Industrial Smoothing$545.00
#102J. Peterman$10,000.25
Скрытие строки с помощью `collapse`
Счет #КлиентСумма
#100Pendant Publishing$2,000.00
#101Kruger Industrial Smoothing$545.00
#102J. Peterman$10,000.25
Скрытие строки с помощью `hidden`
Счет #КлиентСумма
#100Pendant Publishing$2,000.00
#102J. Peterman$10,000.25
<table>  <thead>    <tr>      <th>Счет #</th>      <th>Клиент</th>      <th>Сумма</th>    </tr>  </thead>  <tbody>    <tr>      <td>#100</td>      <td>Pendant Publishing</td>      <td>$2,000.00</td>    </tr>    <tr class="collapse">      <td>#101</td>      <td>Kruger Industrial Smoothing</td>      <td>$545.00</td>    </tr>    <tr>      <td>#102</td>      <td>J. Peterman</td>      <td>$10,000.25</td>    </tr>  </tbody></table>

Это позволяет динамически переключать строки и столбцы без влияния на макет таблицы.

Отображение элементов

Используйте утилиту visible для отображения элемента:

01
02
03
<div class="grid grid-cols-3 gap-4">  <div>01</div>  <div class="visible ...">02</div>  <div>03</div></div>

Это в основном полезно для отмены утилиты invisible на разных размерах экрана.

Адаптивный дизайн

Префикс a visibility утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="visible md:invisible ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков