Seperate color for SVG border and fill is not supported.

[jeetu7]

"fill-current text-teal-500" and "stroke-current text-red-500" works individually on svg items. But when I use them together to give border a different color then fill space "fill-current text-teal-500 stroke-current text-red-500", it fails as it takes only the last indicated text color,. I understand that this is because of the way it is referring the currentColor.

i don't know how to get around this but it is certainly a bug inherent due to indirect referencing of text color. Suggest if we have a work around for this corner case.

Also Ref: #249 which suggested another approach, but then was closed due to not have reached this corner case.

[royvanv]

You can add your own custom colors to the fill or stroke utility:
https://tailwindcss.com/docs/fill/#customizing
https://tailwindcss.com/docs/stroke/#customizing

I would suggest just adding the stroke color and using fill-current with your text color class.

// tailwind.config.js
module.exports = {
  theme: {
   stroke: theme => ({
     'red': theme('colors.red.500'),
   })
  }
}

<svg class="fill-current text-teal-500 stroke-red" ...>

[jeetu7]

Thanks @royvanv . I will try it out.