How to tailwind svg icon classes: compatibility reference and troubleshooting
- Step 1Verify fill attribute is set to currentColor — For fill-current to work, the SVG element must have fill='currentColor'. Check the SVG source after conversion — every element you want themed must use currentColor.
- Step 2Check JIT safelist configuration — If classes are applied dynamically (from a color prop), add them to safelist in tailwind.config.js. JIT's static analysis won't detect dynamically-constructed class names.
- Step 3Test with a simple text color — Wrap your icon in a div class='text-red-500'. If the icon turns red, fill-current is working. If not, check for hardcoded fill attributes on nested elements.
Frequently asked questions
Why doesn't fill-current work on my SVG icon?+
The SVG element likely has a hardcoded fill attribute overriding currentColor. Open the SVG source and check every path, circle, and rect — all fill='#hexcolor' attributes need to be changed to fill='currentColor'.
Which Tailwind classes work on SVG elements?+
text-* (sets CSS color, inherited by fill-current), w-* and h-* (dimensions), opacity-*, rotate-*, translate-*, scale-* (transforms), and stroke-* in Tailwind v3+.
Does stroke-current work the same as fill-current?+
Yes. stroke-current sets stroke to currentColor, making stroke color follow the parent's text color. Use it alongside fill-current for icons where both fill and stroke should be themed.
My icon has fill='none' with a stroke — how do I theme it?+
Add stroke='currentColor' to the SVG element. The fill='none' stays; the stroke inherits from the parent text color. Also add Tailwind's stroke-current class to make it explicit.
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.