如何在tailwind css中使用颜色填充SVG图标?
如何在tailwind css中使用颜色填充SVG图标?
我正在尝试弄清楚如何在使用Tailwind CSS的SVG图标中使用填充颜色。
如果我在路径中使用fill="#十六进制颜色值"，我可以应用颜色。
我试图遵循Tailwind文档并使用它的颜色。
我尝试了许多博客文章中提到的下面的各种变体，但没有找到可用的版本。
当我尝试：
d="M18 7h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h15v4zM4 9v10h16V9H4zm0-4v2h12V5H4zm11 8h3v2h-3v-2z"
/>
然后尝试在div中使用它：
文本SVG呈现为黑色。我想强制它使用蓝色。我已经尝试在每个容器级别上添加蓝色，但它们都没有传递到SVG图像容器中。
在使用Tailwind CSS中，如何使用颜色填充SVG图标？
问题的原因是在SVG图标的路径（path）中使用了color属性，而该路径是在父级div中的第二层。因此，color属性被路径组件的fill属性覆盖了。
无法从父级类中访问其fill属性。
解决方法是在路径（path）组件中使用fill-blue-500类。
最终代码如下：
输出结果如下：
参考链接：[How to modify svg icon colors with Tailwind](https://stackoverflow.com/questions/64197107)
如果我在路径（path）中添加class="fill-yellow-500"，它会以黑色呈现（没有颜色填充）。如果我在名为'fill'的属性中添加该颜色的十六进制值，我可以生成一个有颜色的SVG。我不知道为什么它不像文档中所示那样工作，但现在我放弃了。我将使用十六进制值和fill属性代替Tailwind CSS的颜色值。
我的帖子中的输出结果，不是很理想吗？
不是的，我正在尝试弄清楚如何在我提取的模板上应用颜色。