How do I change SVG stroke color with Tailwind?

Paste the SVG, click Apply + copy Tailwind, then add the copied classes (for example text-rose-500 stroke-current) on the SVG or parent.

stroke-rose-500 vs text color?

Either works. stroke-* sets stroke directly; currentColor + text-* lets stroke follow the text color utility.

Combine with hover:text-* after applying currentColor — or open the dedicated hover recipe page.

This page pairs well with Change SVG Stroke Color React; both use currentColor-friendly markup.

FAQ

Quick answers

How do I change SVG stroke color with Tailwind?: Paste the SVG, click Apply + copy Tailwind, then add the copied classes (for example text-rose-500 stroke-current) on the SVG or parent.
stroke-rose-500 vs text color?: Either works. stroke-* sets stroke directly; currentColor + text-* lets stroke follow the text color utility.
Hover with Tailwind?: Combine with hover:text-* after applying currentColor — or open the dedicated hover recipe page.
Using React + Tailwind?: This page pairs well with Change SVG Stroke Color React; both use currentColor-friendly markup.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B