search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

SVG different fill and stroke colors #449

Open t1mtw0 opened 4 years ago

t1mtw0 commented 4 years ago

I am currently trying to make an SVG, with the wrapper being:

<svg height="250" width="200" class="stroke-current stroke-2 text-white fill-current text-transparent">
    <!-- SVG Icon -->
</svg>

Currently for SVGs, the only possible classes for fill and stroke are .stroke-current and .fill-current, and the colors are implemented using text color classes. The problem is when I need to have them as different colors, and there is no way to have two different colors that correspond with the current for either fill or stroke.

Is there some way to customize it so that this would work? Am I missing something?

fnick851 commented 4 years ago

I am facing the same issue.

tlgreg commented 4 years ago

Not possible from the CDN, but both fill and stroke colors can be customized through the config. Check out customizing section on the utility pages: https://tailwindcss.com/docs/stroke/#customizing https://tailwindcss.com/docs/fill/#customizing https://tailwindcss.com/docs/configuration