Стиль границы

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

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

Установка стиля границы

Используйте border-{style} для управления стилем границы элемента.

<div class="border-solid border-2 border-indigo-600 ..."></div>
<div class="border-dashed border-2 border-indigo-600 ..."></div>
<div class="border-dotted border-2 border-indigo-600 ..."></div>
<div class="border-double border-4 border-indigo-600 ..."></div><div class="border-solid border-2 border-sky-500 ..."></div>
<div class="border-dashed border-2 border-sky-500 ..."></div>
<div class="border-dotted border-2 border-sky-500 ..."></div>
<div class="border-double border-4 border-sky-500 ..."></div>

Отсутствие стиля

Используйте border-none для удаления существующего стиля границы элемента.

Это чаще всего используется для удаления стиля границы, примененного для меньших размеров экрана.

<button class="border-none ...">Save Changes</button>

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

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

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

<div class="border-solid hover:border-dotted">
  <!-- ... -->
</div>

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

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

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

<div class="border-solid md:border-dotted">
  <!-- ... -->
</div>

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