String interpolation in url utilities

[Tortoaster]

I would like to create dynamic classes for complex SVG filters, by inlining the SVG data in a url. url itself doesn't allow any form of string interpolation unfortunately, so I can't get it to use the provided --color-*:

@utility flood-* {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feFlood flood-color=\"--value(--color-*)\" /></filter></svg>#f");
}

Theoretically, it should be possible for tailwind to recognize the referenced variable anyway, despite being embedded in a string, or to provide some other way of doing string interpolation before the url is interpreted. Would this be something you'll consider adding?

As a workaround, I can include all filters using every color (or other variable) I need manually somewhere in the page, but even for a couple of differently colored inset shadows, there is a large probability of either forgetting some or adding too many. And components referencing such filters cannot know whether some parent component actually created them. All in all, it would be awesome if tailwind could save the day again.

[MuhammadOwais-SE]

Hmm..... This is a tricky one because CSS variables (or --value() in Tailwind) cannot be dynamically interpolated inside a url() string, so Tailwind can’t directly generate a dynamic utility for this.

As per my knowledge one workarounds could you if you Predefine the filters for each color you need....

.flood-red { filter: url("data:image/svg+xml;utf8,<svg ...><feFlood flood-color='red'/></svg>#f"); }
.flood-blue { filter: url("data:image/svg+xml;utf8,<svg ...><feFlood flood-color='blue'/></svg>#f"); }

then in your html code it could be somthing like....

<svg style="display:none">
  <filter id="flood-red"><feFlood flood-color="var(--color-red)" /></filter>
</svg>
<div style="filter:url(#flood-red)"></div>