Tailwind literal contains interpolation

A tw"..." literal is a static list of Tailwind candidates. Interpolation would hide part of a class name from Tailwind's scanner, so Zolo rejects it.

let color = "red"
let classes = tw"bg-{color}-600"
//                       ^ error[TE148]

Fix it¶

Choose between complete class names in ordinary Zolo control flow:

let classes = if danger {
  tw"bg-red-600 text-white"
} else {
  tw"bg-slate-100 text-slate-900"
}

Both branches remain normal values of type str, so they work with helpers such as cn and with HTML class attributes:

<button class={cn([tw"rounded px-4", classes])}>Save</button>

For a longer static class list, use a tagged triple string:

const BUTTON = tw"""
  inline-flex items-center justify-center
  rounded-md px-4 py-2
  focus-visible:ring-2
  """