Server-rendered HTML, utility-first styling.

Conditional classes#

Component.html
html
<button hx-post="/subscribe" hx-swap="outerHTML"
  class="px-5 py-2.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
  Subscribe
</button>

Patterns that scale#

  • Server templates render full class names — scanner-friendly by default
  • Use transitions (transition + opacity) for swap polish

Gotchas#

  • hx-swap-injected markup must live in scanned template files
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.