Phoenix LiveView使用Tailwind类时单引号报错解决方法

LiveView模板引擎解析静态class属性时，会自动把属性值里的单引号转义为HTML实体'，这个转义过程会打断引擎对属性字符串的拆分逻辑，直接触发analyze_list/4函数无匹配子句的报错；就算跳过报错，转义后的实体也会让Tailwind JIT扫描器无法识别任意值语法，生成不了对应CSS。

方案1：Elixir表达式包裹class值（优先用，无额外成本） #

用HEEx原生的{}插值语法，把整个class值作为Elixir字符串传入，模板引擎不会对Elixir字符串内部的单引号做转义、拆分处理，完全兼容原有Tailwind写法：

<div class={"before:content-['Not_Hovering'] hover:before:content-['Hovering']"}>
  <!-- 业务内容 -->
</div>

不需要改任何配置，写完直接生效，是处理这类带特殊字符Tailwind类名的通用方案。

方案2：改写Tailwind类名规避单引号 #

如果不想用插值，可以直接在类名里用转义后的双引号替代单引号，不需要修改模板解析逻辑：

<div class="before:content-[&quot;Not_Hovering&quot;] hover:before:content-[&quot;Hovering&quot;]">
  <!-- 业务内容 -->
</div>

缺点是类名可读性差，仅适合临时改单个类的场景。

方案3：抽出自定义工具类（适合复用场景） #

如果这类带hover切换伪元素content的样式会多处用到，直接在Tailwind配置里注册自定义类，模板里不用再写冗长的任意值：
在tailwind.config.js的plugins段添加如下配置：

plugin(({ addUtilities }) => {
  addUtilities({
    '.hover-toggle-content': {
      '&::before': {
        content: "'Not_Hovering'"
      },
      '&:hover::before': {
        content: "'Hovering'"
      }
    }
  })
})

模板里直接引用自定义类即可：

<div class="hover-toggle-content">
  <!-- 业务内容 -->
</div>

这种写法维护成本最低，也不会触发任何模板解析问题。

不要通过关闭LiveView模板自动转义的方式规避问题，会直接引入XSS安全漏洞。

内容的提问来源于stack exchange，提问作者vaer-k