I am seeing this issue in:
Elixir 1.15.0
Phoenix: 1.7.6
LiveView: 0.19.0
I’m having an issue with passing TailwindCSS values into a LiveView Function Component and can’t figure out why it isn’t working as expected. Here’s an example that works:
Function Component:
defmodule Example.Components.SVG do
use Phoenix.Component
attr :height, :string, default: "h-16"
attr :width, :string, default: "w-16"
def image(assigns) do
~H"""
<div class={"#{@height} #{@width} bg-red-500"}></div>
<%= render_slot(@inner_block) %>
"""
end
end
HEEX Template
<Example.Components.SVG.image height="h-8" width="h-8">
This is a test.
</Example.Components.SVG.image>
The code snippets above render this HTML <div class="h-8 w-8 bg-red-500>...</div> and display correctly in the browser.
The above code works, but since I always want this DIV to be a square, it seems more efficient to do this:
Function Component
defmodule Example.Components.SVG do
use Phoenix.Component
attr :size, :string, default: "16"
def image(assigns) do
~H"""
<div class={"h-#{@size} w-#{@size} bg-red-300"}></div>
<%= render_slot(@inner_block) %>
"""
end
end
HEEX Template
<Example.Components.SVG.image size="8">
This is a test.
</Example.Components.SVG.image>
The second set of code snippets also render this HTML <div class="h-8 w-8 bg-red-500>...</div> ; however, they do not render correctly in the browser. Instead, the browser behaves as if no CSS exists at all.
This is true for ALL TailwindCSS classes. For example, if I try to use string interpolation to render different shades of red:
This works <.custom_tag background="bg-red-300"> → class={"#{@background} ..."}
This fails to render <.custom_tag background="300"> → class={"bg-red-#{@background} ..."}
Both code snippets will produce this HTML: <div class="bg-red-300">...</div>
However, only the first example renders correctly. The browser ignores the second CSS completely, even though it is identical.
Is this just a shortcoming of LiveView in Chrome, or is there something special I need to do to in order to use string interpolation to generate part of a TailwindCSS class?
