Sprinkled interactivity meets utilities.

Conditional classes#

Component.html
html
<div x-data="{ open: false }">
  <button @click="open = !open"
    class="px-4 py-2 rounded-lg"
    :class="open ? 'bg-blue-500 text-white' : 'bg-slate-100'">
    Toggle
  </button>
  <p x-show="open" class="mt-2 text-sm">Content</p>
</div>

Patterns that scale#

  • x-bind:class with full names keeps JIT scanning accurate

Gotchas#

  • Classes inside x-data strings ARE scanned (they are in the file) — no issue
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.