Single quotes cause LiveView template processing error

Question

I want to use the following Tainwind classes in my Phoenix LiveView template:

<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

But the single quotes are not processed correctly, and result in the following error:

no function clause matching in Phoenix.LiveView.Engine.analyze_list/4

    The following arguments were given to Phoenix.LiveView.Engine.analyze_list/4:
    
        # 1
        "'"
    
        # 2
        {:restricted, %{}}
    
        # 3
        %{[:default_avatar] => true, [:groups] => true, [:myself] => true}
    
        # 4
        ["before:content-[", []]
    
    Attempted function clauses (showing 2 out of 2):
    
        defp analyze_list([31m[head | tail][0m, [22mvars[0m, [22massigns[0m, [22macc[0m)
        defp analyze_list([31m[][0m, [22mvars[0m, [22massigns[0m, [22macc[0m)

What can I do to use single quotes in the class string of a LiveView template, so that I can use these Tailwind classes?

Answer 1

This problem can be worked around by using a sigil instead of the usual binary string:

<div class={~s"before:content-['Not_Hovering'] hover:before:content-['Hovering']"}>
  <!-- ... -->
</div>