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?