Ширина штриха

Применение

Используйте утилиты stroke-{width}, чтобы установить ширину штриха SVG.

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

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

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

<svg class="stroke-1 md:stroke-2 ...">
  <!-- ... -->
</svg>

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

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

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        strokeWidth: {
+         '3': '3',
+         '4': '4',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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