Видимость

​Основы использования

​Делаем элементы невидимыми

Используйте утилиту 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 только при hover.

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

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

​Контрольные точки и медиа-запросы

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

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.