rhcarvalho
Using Phoenix.VerifiedRoutes within TailwindCSS arbitrary rules
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?
Marked As Solved
LostKobrakai
<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
Also Liked
harmon25
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>
codeanpeace
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 ¯\_(ツ)_/¯
Last Post!
LostKobrakai
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"