The workflow for adding SVG to your Tailwind project should be done using inline SVG.
Adam Watham the creator of Tailwind CSS made a video about working with inline SVG in Tailwind. In the video he shows a workflow you would use to prep an unoptimized SVG for a Tailwind project. Here’s the steps with one extra step he didn’t mention:
- Drop the SVG file or paste the SVG markup into the optimizer at SVGOMG.
- Copy the markup provided by SVGOMG and paste into your project.
- Remove any fill or stroke attributes so Tailwind can modify those with classes (not shown in the video).
- Remove any XMLNS attributes or XML tags, these are not needed for inline SVG.
- Add Tailwind classes.
If you’re using a component based framework it’s recommended that you also extract the icons into components that can be reused throughout your application.
The benefits of this approach:
- Full control over the size and color of your SVG icons
- Faster load speed since the icons are part of the HTML
Here’s an example based on the Fiddle you shared in the comments. I ran the SVGs through SVGOMG and removed the fill attributes so Tailwind can control that.
<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />
<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
<path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>
<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
<path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>