Hi,
In the past when I needed to set the background image on an element I gave up Verified Routes and wrote something like bg-[url(/images/background.svg)] in my template. The Tailwind compiler then generates a CSS class that sets the background to the image.
I found myself in need of doing it again, and since I couldn’t find an existing thread on using TailwindCSS + VerifiedRoutes I decided to ask – is there a way to use both together?
I tried this but it doesn’t work, because I understand the Tailwind compiler sees Elixir code as is and not the compiled string after the ~p sigil is processed:
<div class={"bg-[url(#{~p"/images/background.svg"})]"}>...</div>
Another idea, which I did not try, would be to add some kind of plugin in tailwind.config.js similar to how Heroicons are made available. I thought perhaps someone in the community has an easier way to offer?
Hmm, wonder if the nested double quotes are the problem…
class={"bg-[url(" + ~p"/images/background.svg" + ")]"}
class={"bg-[url(#{~p'/images/background.svg'})]"}
Just to rule that out, I’d give those a shot ¯\_(ツ)_/¯
1 Like
Tailwind only looks at the text of the files, without any further interpretation: Content Configuration - Tailwind CSS, so quoting differences don’t matter.
There are a few possibilities listed in Content Configuration - Tailwind CSS.
I could:
Considering that Verified Routes for static paths don’t really verify that the full path exists in disk, but only that the path is well-formed, then I think the possibilities above are not worth it – simply don’t use a verified route for cases like in my OP.
I will feel good if other people share that’s what they do 
My solution to a similar problem was to use css variables and to extend tailwind background image:
{
extend: {
backgroundImage: (theme) => ({
custom: "var(--bg-image)"
})
}
}
this requires setting the --bg-image css variable to url(/some/image.png) which can be done with an inline style, kinda like this:
<div style={"--bg-image: #{url}"} class="bg-custom">
something here
</div>
2 Likes
A bit of going on a tangent, but something I learned recently is that [...] can also be used to set CSS variables:
This can be useful for things like CSS variables as well, especially when they need to change under different conditions:
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
<!-- ... -->
</div>
So that could be used to set --bg-image conditionally, but if the value would be url(...) then again the URL needs to appear as-is within the parentheses or back to Tailwind not picking up the value to generate CSS classes.
Just spitballing here, but how about just adding it to the safelist since it’s just the one URL?
<div class="bg-[url:var(--bg-image)]" style="--bg-image: url(…)">
That one works. The style can be dynamically set in that case.
More details: Adding Custom Styles - Tailwind CSS
1 Like
I like how you put those ideas together 
Did you actually reach out for that in existing projects? I’m still finding verified routes may not be worth the trouble in that case.
I did use that approach before, though with colors not urls.
