Just-in-Time: Следующее поколение Tailwind CSS
Tailwind CSS на GitHubTailwind CSS в Telegram

Разделение стиля

Утилиты для управления стилем границы между элементами.

Справочник классов по умолчанию

Класс
Свойства
divide-solid > * + *border-style: solid;
divide-dashed > * + *border-style: dashed;
divide-dotted > * + *border-style: dotted;
divide-double > * + *border-style: double;
divide-none > * + *border-style: none;

Применение

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

1
2
3
<div class="divide-y-4 divide-yellow-600 divide-dashed">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

<div class="divide-y-2 divide-dashed md:divide-solid">
  <!-- ... -->
</div>

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

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

Варианты

По умолчанию, только responsive варианты создаются для утилит divide style.

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       divideStyle: ['hover', 'focus'],
      }
    }
  }

Отключение

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

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