Ширина границы

Справочник

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

Все стороны

Используйте утилиты border, border-0, border-2, border-4, или border-8 для установки ширины границы для всех сторон элемента.

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div><div class="border border-sky-500"></div>
<div class="border-2 border-sky-500"></div>
<div class="border-4 border-sky-500"></div>
<div class="border-8 border-sky-500"></div>

Индивидуальные стороны

Используйте утилиты border-{side}, border-{side}-0, border-{side}-2, border-{side}-4, или border-{side}-8 для установки ширины границы для одной стороны элемента.

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

Горизонтальные и вертикальные стороны

Используйте утилиты border-{x|y}-{width} для установки ширины границы на двух сторонах элемента одновременно.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

Между элементами

Вы также можете добавлять границы между дочерними элементами, используя утилиты divide-{x/y}-{width} и divide-{color}.

<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div><div class="divide-y divide-slate-700 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Узнайте больше в документации Деление ширины и Деление цвета.

Использование логических свойств

Используйте утилиты border-s-* и border-e-* для настройки логических свойств border-inline-start-width и border-inline-end-width, которые отображаются либо левой, либо правой границей в зависимости от направления текста.

<div dir="ltr">
  <div class="border-s-4 ..."></div>
<div>

<div dir="rtl">
  <div class="border-s-4 ..."></div>
<div>

Для большего контроля вы также можете использовать модификаторы LTR и RTL, чтобы условно применять определенные стили в зависимости от текущего направления текста.

Использование без Preflight

Если вы отключили Preflight в своем проекте, вам необходимо включить утилиту стиля границы всякий раз, когда вы используете одну из утилит border-width для того, чтобы граница действительно отобразилась:

<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
  <!-- ... -->
</div>

Это потому, что браузеры устанавливают border-style большинства элементов в значение none по умолчанию, поэтому добавление border-width в одиночку недостаточно для отображения границы.

Preflight применяет глобальную сброс границ, который устанавливает border-style в solid и border-width в 0, что делает возможным добавление границы к элементу с помощью одной лишь утилиты border-width в проектах, использующих Preflight.

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

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

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

<div class="border-2 hover:border-t-4">
  <!-- ... -->
</div>

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

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

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

<div class="border-2 md:border-t-4">
  <!-- ... -->
</div>

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

Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет пять border-width утилит, и то же количество утилит на каждую сторону (горизонтальную, вертикальную, верхнюю, правую, нижнюю и левую). Вы можете изменить, добавить или удалить их, отредактировав раздел theme.borderWidth в вашей конфигурации Tailwind.

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

Дополнительную информацию о настройке темы по умолчанию можно найти в документации настройки темы.

Произвольные значения

Если вам нужно использовать разовое border-{side}-{width} значение, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для генерации свойства на лету с любым произвольным значением.

<div class="border-t-[3px]">
  <!-- ... -->
</div>

Дополнительную информацию о поддержке произвольных значений можно найти в документации по произвольным значениям.