Tailwindcss: Color utilities for SVG fill

[James-ONeill]

What are your thoughts on adding fill utilities for all of the set colors? For instance .fill-blue, .hover:fill-blue, etc.

I'm guessing it there would be file size implications but as an optional feature I would definitely use them.

[adamwathan]

Hey @James-ONeill! Right now the recommended way to handle this is using the text color utilities.

We provide a bit of code in our base styles for making this work:

svg { fill: currentColor; }

So if you use a class like text-red on an SVG element, it will set the fill to that text color.

I am thinking about adding separate scales for fill and stroke though for people who want more control, going to discuss it with the team and see what they think.

[James-ONeill]

Thanks @adamwathan, I didn't notice that the text color utilities existed.