Цвет границы

Применение

Управляйте цветом границы элемента с помощью утилит border-{color}.

Изменение непрозрачности

Управляйте непрозрачностью цвета границы элемента с помощью утилит border-opacity-{amount}.

Дополнительные сведения смотрите в документации по прозрачности границы.

Адаптивность

Чтобы управлять цветом границы элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите цвета границы. Например, используйте md:border-green-500, чтобы применить утилиту border-green-500 только при средних размерах экрана и выше.

<button class="border-blue-500 md:border-green-500 ...">
  Button
</button>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Наведение

Чтобы управлять цветом границы элемента при наведении, добавьте префикс hover: к любой существующей утилите цвета границы. Например, используйте hover:border-blue-500, чтобы применить утилиту border-blue-500 при наведении курсора.

Утилиты Hover также можно комбинировать с адаптивными утилитами, добавив префикс {screen}: перед префиксом hover:.

<button class="... md:border-blue-500 md:hover:border-blue-700 ...">Кнопка</button>

Фокус

Чтобы управлять цветом границы элемента в фокусе, добавьте префикс focus: к любой существующей утилите цвета границы. Например, используйте focus:border-blue-500, чтобы применить утилиту border-blue-500 к фокусу.

Утилиты Focus также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом focus:.

<input class="... md:border-gray-200 md:focus:border-white ...">

Кастомизация

Цвета границы

По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в качестве цветов границ.

Вы можете настроить свою цветовую палитру, отредактировав раздел theme.colors вашего файла tailwind.config.js, или настроить только цвета границ, используя раздел theme.borderColor.

  // tailwind.config.js
  module.exports = {
    theme: {
      borderColor: theme => ({
-       ...theme('colors'),
        DEFAULT: theme('colors.gray.300', 'currentColor'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

Варианты

По умолчанию, только responsive, темный режим (если включен), group-hover, focus-within, hover и focus варианты создаются для утилит border color.

Вы можете контролировать, какие варианты создаются для утилит border color для изменения свойства borderColor в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       borderColor: ['active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения border color, Вы можете полностью отключить их, установив для borderColor свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     borderColor: false,
    }
  }