Домашняя страница Tailwind CSS
  1. Макет
  2. Украшение коробки

Краткая справка

Класс
Свойства
box-decoration-clonebox-decoration-break: clone;
box-decoration-slicebox-decoration-break: slice;

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

Установка разрыва украшения коробки

Используйте утилиты box-decoration-slice и box-decoration-clone, чтобы контролировать, должны ли такие свойства, как background, border, border-image, box-shadow, clip-path, margin и padding, как если бы элемент представлял собой один непрерывный фрагмент или отдельные блоки.

box-decoration-slice

Привет
Мир

box-decoration-clone

Привет
Мир 
<span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Привет<br />
  Мир
</span>
<span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Привет<br />
  Мир
</span>

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

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

<div class="box-decoration-clone hover:box-decoration-slice">
  <!-- ... -->
</div>

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

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

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

<div class="box-decoration-clone md:box-decoration-slice">
  <!-- ... -->
</div>

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