How to modify svg icon colors with tailwind?

@daisha 

To modify SVG icon colors with Tailwind, you can use the text- utility classes provided by Tailwind. Here is an example of how to modify an SVG icon color with Tailwind:

1. Add the SVG icon to your HTML file:

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>

1. Apply a Tailwind utility class to change the color of the SVG icon:

1
2
3

<svg class="text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>

In this example, the text-red-500 class is used to change the SVG icon color to red. You can replace red-500 with any of Tailwind's color utility class names to change the icon color to a different color.