Bindings — :attr

<div x-data="{ pct: 65 }">
  <div class="...">
    <div class="h-full bg-primary-500" :style="'width:' + pct + '%'"></div>
  </div>
  <p class="..." :title="pct + '%'">:style sets the width; :title is a bound attribute (hover me).</p>
</div>

<div x-data="{ active: true, size: 'text-lg' }">
  <label class="..."><input type="checkbox" x-model="active"> Active</label>
  <p :class="active ? 'text-primary-600' : 'text-neutral-400'">String: one class or the other.</p>
  <p :class="{ 'font-bold': active, 'line-through': !active }">Object: each key is a class, kept while its value is true.</p>
  <p :class="[size, active && 'underline']">Array: every truthy entry is a class.</p>
</div>

<div x-data="{ c: '#7c3aed', m: 24, bold: false }">
  <div class="...">
    <label class="flex items-center gap-2">Colour
      <input type="color" x-model="c" class="...">
    </label>
    <label class="flex items-center gap-2">Top margin
      <input type="range" min="0" max="48" x-model.number="m">
      <span class="..." x-text="m + 'px'"></span>
    </label>
    <label class="flex items-center gap-2">
      <input type="checkbox" x-model="bold"> Bold
    </label>
  </div>
  <p :style="{ color: c, marginTop: m + 'px', fontWeight: bold ? 700 : null }">
    A style OBJECT: camelCase keys become kebab-case CSS, and falsy values are skipped.
  </p>
</div>