Утилиты для управления стилем границ элемента.
<div class="border-solid border-4 border-light-blue-500 ..."></div>
<div class="border-dashed border-4 border-light-blue-500 ..."></div>
<div class="border-dotted border-4 border-light-blue-500 ..."></div>
<div class="border-double border-4 border-light-blue-500 ..."></div>
<div class="border-none border-4 border-light-blue-500 ..."></div>Чтобы управлять стилем границы элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите стилей границы. Например, используйте md:border-dotted, чтобы применить утилиту border-dotted только при средних размерах экрана и выше.
<div class="border-solid md:border-dotted ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит border style.
Вы можете контролировать, какие варианты создаются для утилит border style для изменения свойства borderStyle в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ borderStyle: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения border style, Вы можете полностью отключить их, установив для borderStyle свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ borderStyle: false,
}
}