Basics

This check has a base priority of normal and works with any version of Elixir.

Explanation

Forbids string interpolation inside HEEx class= attributes.

Tailwind's JIT compiler scans source for class names as literal strings. Constructions like class={"btn-#{variant}"} produce a computed class name that Tailwind cannot statically discover, so the generated CSS won't include the corresponding utility — the styling silently disappears in production.

Use a map of literal class strings keyed on the dynamic value instead:

@variants %{
  primary: "bg-blue-600 text-white",
  secondary: "bg-gray-200 text-gray-900"
}

<button class={["btn", @variants[@variant]]}>...</button>

The check inspects every ~H sigil and every .heex template referenced via embed_templates.

Bad

<button class={"btn-#{@variant}"}>...</button>
<div class="px-#{@size}">...</div>

Good

<button class={["btn", @variants[@variant]]}>...</button>

Check-Specific Parameters

There are no specific parameters for this check.

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.