Заполнение

Применение

Используйте fill-current, чтобы установить цвет заливки SVG на текущий цвет текста. Это упрощает установку цвета заливки элемента, комбинируя этот класс с существующей утилитой цвета текста.

Полезно для стилизации наборов иконок, таких как Zondicons, которые полностью нарисованы с заливкой.

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

Управляйте тем, какие утилиты заливки генерирует Tailwind, настраивая раздел theme.fill в вашем файле tailwind.config.js:

  // tailwind.config.js
  module.exports = {
    theme: {
-     fill: {
-       current: 'currentColor',
-     }
+     fill: theme => ({
+       'red': theme('colors.red.500'),
+       'green': theme('colors.green.500'),
+       'blue': theme('colors.blue.500'),
+     })
    }
  }

Варианты

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

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

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

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

Отключение

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

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