Visibility — Tailwind CSS

Быстрый справочник

Класс	Свойства
visible	visibility: visible;
invisible	visibility: hidden;
collapse	visibility: collapse;

Базовое использование

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

Используйте invisible для скрытия элемента, но сохранения его места в DOM, влияя на расположение других элементов (сравните с hidden из документации display).

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

Сжатие элементов

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

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

<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Client</th>
      <th>Amount</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 для отображения элемента. Это в основном полезно для отмены invisible утилиты при различных размерах экрана.

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

Условное применение

Наведение, фокус и другие состояния

Tailwind позволяет условно применять утилиты в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:invisible для применения только invisible утилиты при наведении.

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

Полный список всех доступных модификаторов состояния можно найти в документации Наведение, фокус и другие состояния.

Точки разрыва и медиа-запросы

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки разрыва адаптивного дизайна, тёмный режим, prefers-reduced-motion и многое другое. Например, используйте md:invisible для применения invisible утилиты только при средних и больших размерах экрана.

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

Дополнительную информацию можно найти в документации по адаптивному дизайну, тёмному режиму и другим модификаторам медиа-запросов.