SVG

stroke

Утилиты для стилизации обводки SVG элементов.

ClassStyles
stroke-none
stroke: none;
stroke-inherit
stroke: inherit;
stroke-current
stroke: currentColor;
stroke-transparent
stroke: transparent;
stroke-black
stroke: var(--color-black); /* #000 */
stroke-white
stroke: var(--color-white); /* #fff */
stroke-red-50
stroke: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
stroke-red-100
stroke: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
stroke-red-200
stroke: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
stroke-red-300
stroke: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */

Примеры

Базовый пример

Используйте утилиты как stroke-indigo-500 и stroke-lime-600 для изменения цвета обводки SVG:

<svg class="stroke-cyan-500 ...">  <!-- ... --></svg>

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

Использование текущего цвета

Используйте утилиту stroke-current для установки цвета обводки в текущий цвет текста:

Наведите курсор на кнопку, чтобы увидеть изменение цвета обводки

<button class="bg-white text-pink-600 hover:bg-pink-600 hover:text-white ...">  <svg class="size-5 stroke-current ..." fill="none">    <!-- ... -->  </svg>  Скачать файл</button>

Использование пользовательского значения

Используйте синтаксис stroke-[<value>] , чтобы задать stroke color на основе полностью пользовательского значения:

<svg class="stroke-[#243c5a] ...">  <!-- ... --></svg>

Для переменных CSS вы также можете использовать синтаксис: stroke-(<custom-property>)

<svg class="stroke-(--my-stroke-color) ...">  <!-- ... --></svg>

Это просто сокращение, stroke-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a stroke утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<svg class="stroke-cyan-500 md:stroke-cyan-700 ...">  <!-- ... --></svg>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --color-* для настройки утилит color в вашем проекте:

@theme {  --color-regal-blue: #243c5a; }

Теперь утилиту stroke-regal-blue можно использовать в вашей разметке:

<svg class="stroke-regal-blue">  <!-- ... --></svg>

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков