# Using Phoenix.VerifiedRoutes within TailwindCSS arbitrary rules **URL:** \ **Category:** Questions\ **Tags:** phoenix, tailwindcss, verified-routes\ **Created:** [January 30, 2024, 10:40am UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315 "2024-01-30T10:40:58Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\ **Post date:** [January 30, 2024, 10:40am UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/1 "2024-01-30T10:40:59Z")
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: ```heex
...
``` 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? ---
**Author:** ![codeanpeace](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/codeanpeace/32/10278_2.png) [@codeanpeace](https://forum.elixirforum.com/u/codeanpeace)\ **Post date:** [January 30, 2024, 8:54pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/2 "2024-01-30T20:54:59Z")
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 ¯\_(ツ)\_/¯ ---
**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\ **Post date:** [February 5, 2024, 4:08pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/3 "2024-02-05T16:08:37Z")
Tailwind only looks at the text of the files, without any further interpretation: [Detecting classes in source files - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/content-configuration#class-detection-in-depth), so quoting differences don’t matter. ---
**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\ **Post date:** [February 5, 2024, 4:18pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/4 "2024-02-05T16:18:34Z")
There are a few possibilities listed in [Detecting classes in source files - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/content-configuration#dynamic-class-names). I could: - go out of my way with some [transformation](https://tailwindcss.com/docs/content-configuration#transforming-source-files) step; - [customize the extraction logic](https://tailwindcss.com/docs/content-configuration#customizing-extraction-logic) to account for the `~p` sigil; - add a [plugin](https://tailwindcss.com/docs/plugins). 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 🙂 ---
**Author:** ![harmon25](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/harmon25/32/1274_2.png) [@harmon25](https://forum.elixirforum.com/u/harmon25)\ **Post date:** [February 5, 2024, 5:47pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/5 "2024-02-05T17:47:07Z")
My solution to a similar problem was to use css variables and to extend tailwind background image: ```json { 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: ```elixir
something here
``` ---
**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\ **Post date:** [February 6, 2024, 4:46pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/6 "2024-02-06T16:46:07Z")
A bit of going on a tangent, but something I learned recently is that `[...]` can also be used to set CSS variables: > **[Arbitrary properties - Adding custom styles - Core concepts](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties)** > > Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you. | Best practices for adding your own custom styles in Tailwind projects. > This can be useful for things like CSS variables as well, especially when they need to change under different conditions: > > ```elixir >
> >
> > ``` 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. ---
**Author:** ![arcanemachine](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arcanemachine/32/29109_2.png) [@arcanemachine](https://forum.elixirforum.com/u/arcanemachine)\ **Post date:** [February 6, 2024, 10:04pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/7 "2024-02-06T22:04:53Z")
Just spitballing here, but how about just [adding it to the safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) since it’s just the one URL? ---
**Author:** ![LostKobrakai](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/32/3072_2.png) [@LostKobrakai](https://forum.elixirforum.com/u/LostKobrakai)\ **Post date:** [February 6, 2024, 10:11pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/8 "2024-02-06T22:11:08Z")
> [@rhcarvalho](#): > > 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. ```elixir
``` That one works. The style can be dynamically set in that case. More details: [Adding custom styles - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) ---
**Author:** ![rhcarvalho](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/rhcarvalho/32/32243_2.png) [@rhcarvalho](https://forum.elixirforum.com/u/rhcarvalho)\ **Post date:** [February 7, 2024, 1:46pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/9 "2024-02-07T13:46:29Z")
👏 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. ---
**Author:** ![LostKobrakai](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/32/3072_2.png) [@LostKobrakai](https://forum.elixirforum.com/u/LostKobrakai)\ **Post date:** [February 7, 2024, 1:55pm UTC](https://forum.elixirforum.com/t/using-phoenix-verifiedroutes-within-tailwindcss-arbitrary-rules/61315/10 "2024-02-07T13:55:34Z")
I did use that approach before, though with colors not urls.