How to convert hardcoded svg colors to tailwind css classes
- Step 1Upload your SVG icon — Drop the SVG with hardcoded colors. The tool scans all fill, stroke, and gradient stop colors and shows the closest Tailwind palette match for each.
- Step 2Review and adjust color mappings — Accept the auto-matched colors or pick a different Tailwind class. Set colors to fill-current to make them inherit from the parent text color.
- Step 3Copy the Tailwind-ready SVG — Download the modified SVG. Use it inline in HTML and control its color by setting a Tailwind text-* class on the parent element.
Frequently asked questions
What does fill-current mean?+
fill-current is a Tailwind utility that sets SVG fill to currentColor — the CSS color value of the current element or its nearest ancestor. Add text-blue-500 to a wrapper and the icon turns blue.
Does this work for multi-color icons?+
Yes. Each unique color in the SVG can be mapped to a different Tailwind class. A two-color icon can have its primary fill mapped to fill-current and its accent color kept as a fixed Tailwind palette value.
Does it work for dark mode?+
Yes. Since fill-current inherits from CSS color, adding dark:text-white to a wrapper makes the icon white in dark mode — without touching the SVG source.
What if my SVG color doesn't match any Tailwind palette color?+
The tool maps to the closest color in CIE Lab color space. For brand colors not in the palette, use Tailwind's arbitrary value syntax: fill-[#yourcolor].
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.