Liveview dynamic tailwind colors not working

Phoenix Forum Questions / Help
, ,
1

Hi everyone,
I’m currently trying to dynamically change my divs background colors based on some assigns in my liveview,
for that i tried using string interpolation like I usually do for other things like text ect :

<div class={"bg-[#{@myAssign}]"} >

However the above code does not seam to work, even when I directly type my color value into it like so:

<div class={"bg-[#{"#000"}]"} >

No using string interpolation does work:

<div class={"bg-[#000]"} >

Is this the intended behaviour or not? If it is, how should I dynamically set my colors?

Thanks for the help!

2

Good thing that you wrote, the last time I found the answer I was banging my head against the wall for the second day.

The tailwind pre-processor scans the source code. This means that if you don’t have the full class written somewhere, it will not get included by tailwind, as it has no concept what string concatenation result will be.

You can read more discussion on this here: Can we solve the tailwind-interpolation-problem with a macro?

1 Like
3

Well thank you, that seams to be exactly my problem.
However I did already banged my head against the wall for some time now ^^
I’ll use the “style” attribute I suppose then…

Thanks again !

1 Like
4

I’ve run into this a couple of times and resolved it by making sure the dynamic color was used at least once somewhere else on the page, somewhere hidden, that way tailwind includes it.

5

I outlined an approach where we’ve had some success using CSS variables and data attributes. You can check it out here.