Tiny apps with tiny CSS.

Conditional classes#

Component.tsx
jsx
import { useState } from 'preact/hooks';

export function Toggle() {
  const [on, setOn] = useState(false);
  return <button class={on ? 'btn-active nk' : 'btn'} onClick={() => setOn(!on)} />;
}

Patterns that scale#

  • Tiny apps: utilities keep the CSS budget predictable

Gotchas#

  • None specific — general JIT rules apply
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.