@windicss/plugin-scrollbar #

Добавляет утилиты стилей для полос прокрутки в браузерах на базе Firefox и webkit. Этот плагин модифицирован на основе tailwind-scrollbar для адаптации к Windi CSS.

Установка #

npm install --save-dev @windicss/plugin-scrollbar

Добавьте его в массив плагинов вашего файла конфигурации.

export default {
  theme: {
    // ...
  },
  plugins: [
    require('@windicss/plugin-scrollbar'),
    // ...
  ],
}

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

NB: Этот плагин стилизации полос прокрутки; это не заставляет их появляться. Используйте типичные методы CSS, чтобы заставить контент переполняться и запускать полосу прокрутки.

Для каждого элемента, который вы хотите стилизовать, добавьте класс .scrollbar или .scrollbar-thin. Затем вы можете добавить любые классы scrollbar-track-{color}, scrollbar-thumb-{color} или hover:scrollbar-thumb-{color}. (Обратите внимание, что классы hover:scrollbar-thumb-{color} имеют эффекты только в браузерах на основе webkit.)

Вот минимальный пример (имея в виду, что классы h-32 и h-64 существуют только для того, чтобы заставить появиться полосу прокрутки):

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
    <div class="h-64"></div>
</div>

Живую версию этой демонстрации можно найти здесь.

Этот плагин также может добавлять утилиты для создания закругленных полос прокрутки (путем ссылки на ваши сконфигурированные настройки border radius). Однако, поскольку они поддерживаются только в браузерах на основе Webkit, их использование в кросс-браузерных приложениях нецелесообразно. Чтобы включить утилиты с полосой прокрутки с закругленными углами, добавьте 'rounded' в список вариантов полосы прокрутки в файле конфигурации. Это добавит такие утилиты, как scrollbar-thumb-rounded или scrollbar-thumb-rounded-md.