Using Phoenix.VerifiedRoutes within TailwindCSS arbitrary rules

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 ¯\_(ツ)_/¯

Tailwind only looks at the text of the files, without any further interpretation: Detecting classes in source files - Core concepts - Tailwind CSS, so quoting differences don’t matter.

There are a few possibilities listed in Detecting classes in source files - Core concepts - Tailwind CSS.

I could:

• go out of my way with some transformation step;
• customize the extraction logic to account for the ~p sigil;
• add a plugin.

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>

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 - Core concepts - Tailwind CSS

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.