Tailwind CSS with ShadowJS: Dynamic classes: write the whole class name

Dynamic classes: write the whole class name

A class name that exists only after string concatenation never appears in your source, so a tool that finds classes by reading source text cannot see it.

For agentsUpdated 2026-10-20

A class name that exists only after string concatenation never appears in your source, so a tool that finds classes by reading source text cannot see it. Keep every class name as a complete literal and choose between literals at run time. See Tailwind documentation for the rule as Tailwind states it.

src/status-badge.tsxtsx

export type Tone = "success" | "warning";

// Complete class names, written out: this is what a source scanner can read.
const TONES: Record<Tone, string> = {
  success: "bg-green-100 text-green-800",
  warning: "bg-amber-100 text-amber-800",
};

export function StatusBadge(props: { tone: Tone; children: string }) {
  return <span class={["rounded-full px-2 py-0.5 text-xs font-medium", TONES[props.tone]]}>{props.children}</span>;
}

export function Badges() {
  return (
    <>
      <StatusBadge tone="success">active</StatusBadge>
      <StatusBadge tone="warning">paused</StatusBadge>
    </>
  );
}