Just-in-Time: Следующее поколение Tailwind CSS
Узнать больше →
Tailwind CSS home page
Tailwind CSS на GitHubTailwind CSS в Telegram

Разделение цвета

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

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

Класс
Предпросмотр 
divide-transparent > * + *
divide-current > * + *
divide-black > * + *
divide-white > * + *
divide-gray-50 > * + *
divide-gray-100 > * + *
divide-gray-200 > * + *
divide-gray-300 > * + *
divide-gray-400 > * + *
divide-gray-500 > * + *
divide-gray-600 > * + *
divide-gray-700 > * + *
divide-gray-800 > * + *
divide-gray-900 > * + *
divide-red-50 > * + *
divide-red-100 > * + *
divide-red-200 > * + *
divide-red-300 > * + *
divide-red-400 > * + *
divide-red-500 > * + *
divide-red-600 > * + *
divide-red-700 > * + *
divide-red-800 > * + *
divide-red-900 > * + *
divide-yellow-50 > * + *
divide-yellow-100 > * + *
divide-yellow-200 > * + *
divide-yellow-300 > * + *
divide-yellow-400 > * + *
divide-yellow-500 > * + *
divide-yellow-600 > * + *
divide-yellow-700 > * + *
divide-yellow-800 > * + *
divide-yellow-900 > * + *
divide-green-50 > * + *
divide-green-100 > * + *
divide-green-200 > * + *
divide-green-300 > * + *
divide-green-400 > * + *
divide-green-500 > * + *
divide-green-600 > * + *
divide-green-700 > * + *
divide-green-800 > * + *
divide-green-900 > * + *
divide-blue-50 > * + *
divide-blue-100 > * + *
divide-blue-200 > * + *
divide-blue-300 > * + *
divide-blue-400 > * + *
divide-blue-500 > * + *
divide-blue-600 > * + *
divide-blue-700 > * + *
divide-blue-800 > * + *
divide-blue-900 > * + *
divide-indigo-50 > * + *
divide-indigo-100 > * + *
divide-indigo-200 > * + *
divide-indigo-300 > * + *
divide-indigo-400 > * + *
divide-indigo-500 > * + *
divide-indigo-600 > * + *
divide-indigo-700 > * + *
divide-indigo-800 > * + *
divide-indigo-900 > * + *
divide-purple-50 > * + *
divide-purple-100 > * + *
divide-purple-200 > * + *
divide-purple-300 > * + *
divide-purple-400 > * + *
divide-purple-500 > * + *
divide-purple-600 > * + *
divide-purple-700 > * + *
divide-purple-800 > * + *
divide-purple-900 > * + *
divide-pink-50 > * + *
divide-pink-100 > * + *
divide-pink-200 > * + *
divide-pink-300 > * + *
divide-pink-400 > * + *
divide-pink-500 > * + *
divide-pink-600 > * + *
divide-pink-700 > * + *
divide-pink-800 > * + *
divide-pink-900 > * + *

Применение

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

1
2
3
<div class="divide-y divide-fuchsia-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

1
2
3
<div class="divide-y-4 divide-black divide-opacity-25">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

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

<div class="divide-y divide-teal-400 md:divide-pink-400">
  <div class="py-2">1</div>
  <div class="py-2">2</div>
  <div class="py-2">3</div>
</div>

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

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

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

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

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

  // tailwind.config.js
  module.exports = {
    theme: {
      divideColor: theme => ({
-       ...theme('borderColors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

Варианты

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

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

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

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

Отключение

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

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     divideColor: false,
    }
  }
Разделение шириныРазделение непрозрачности
Edit this page on GitHub