Изоляция

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

​Установка контекста наложения

Используйте утилиты isolate и isolation-auto, чтобы указать, должен ли элемент явно создавать новый контекст стекирования.

<div class="isolate ...">
  <!-- ... -->
</div>

---

​Применяя условно

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

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

<div class="isolate hover:isolation-auto">
  <!-- ... -->
</div>

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

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

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

<div class="isolate md:isolation-auto">
  <!-- ... -->
</div>

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