Styling

Style components with class, classList, inline styles and CSS files, and set up Tailwind CSS 4 with the Vite plugin.

For agentsUpdated 2026-10-20

After this page you can drive classes and inline styles from signals, choose between class, classList and the class: / style: namespaces, wire CSS files and Tailwind CSS 4 into a Vite app, and know which style values the server renderer drops.

src/badge.tsxtsx

export function Badge() {
  const active = true;
  return <span class={["badge", { "badge--on": active, "badge--off": !active }]}>on</span>;
}

A static class="..." string is part of the compiled template and costs nothing at runtime. A dynamic value is written by a binding that re-runs only when a signal it reads changes. The class attribute is the name to use; className is an accepted alias (both produce the class attribute, see class or className).