Is it possible to pass partial TailwindCSS values into a LiveView Component Function?

Questions / Help
, ,
1

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?

2

This is a limitation of Tailwind, unrelated to Phoenix or LiveView. Search for the “Dynamic class names” section here: Content Configuration - Tailwind CSS

You have to have the full class name (unbroken) present someplace in the code for the Tailwind JIT to include it in your CSS bundle.

The reason you’re not seeing anything when you construct the class name dynamically is that those classes are not being ”seen” and thus not built by Tailwind.

4 Likes
3

Thanks! I remember this about Tailwind now that you say it.