Штрих

Применение

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

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

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

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

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

Варианты

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

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

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

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

Отключение

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

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