How to tell the angular cli to let tailwind apply style to svgs in my public folder

I am building a angular frontend (v20) with tailwind 4.

To keep my svgs separated from my UI code, I want to put them into a separate folder.

I found out that for angular to serve the resources to the browser they need to be in the public or asset folder (it has to be a folder which is not the src folder).

Now the angular cli seemingly only applies the tailwind classes to things inside the src folder, meaning I cannot keep the tailwind classes on my svgs directly. E. g.

<svg
class="h-[1em] opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<g
stroke-linejoin="round"

...

<img src="svgs/key.svg" alt="Key icon" />


won't work, but has to be:

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<g
stroke-linejoin="round"

...

<img src="svgs/key.svg" alt="Key icon" class="h-[1em] opacity-50" />


Putting the tailwind style directly into the svg, does work if the svgs are part of your template (which is in turn in your src folder of course).

As suggested here I tried using the

@source 'public/svgs/*.svg';


but that had no effect.

Also tried some outdated llm suggestions.

My goal is to have all the tailwind classes on the svgs directly, so I don't have to add the styles every time I use a svg.

Continue reading...