Происхождение фона

​

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

​

Установка источника фона

Используйте bg-origin-border, bg-origin-padding и bg-origin-content для управления отображением фона элемента.

<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>

​

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

​

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

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

<div class="bg-origin-border hover:bg-origin-padding">
  <!-- ... -->
</div>

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

​

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

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

<div class="bg-origin-border md:bg-origin-padding">
  <!-- ... -->
</div>

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