Fine-grained reactivity, zero-overhead styling.

Conditional classes#

Component.tsx
tsx
import { createSignal } from 'solid-js';

export function Toggle() {
  const [active, setActive] = createSignal(false);
  return (
    <button
      class="px-4 py-2 rounded-lg"
      classList={{ 'bg-blue-500 text-white': active() }}
      onClick={() => setActive(!active())}
    />
  );
}

Patterns that scale#

  • classList is ideal for variant maps
  • Utilities keep fine-grained updates cheap — no style recalculation surprises

Gotchas#

  • Same rule: literal names, or safelist
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.