Tailwind Style

// tailwind-style — Tailwind 4 utility classes in template + scoped @style for component rules

@state {
  let active = state(false)
  let count = state(0)

  const toggle = action(() => { active = !active })
  const increment = action(() => { count++ })
}

@template {
  <div class="tw-card">
    <h2 class="text-xl font-semibold mb-4">Tailwind + Scoped Style</h2>
    <div class="flex gap-3 mb-4">
      <button
        class={['px-4 py-2 rounded font-medium transition-colors', active ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700']}
        on:click={toggle}
      >
        {active ? 'Active' : 'Inactive'}
      </button>
      <button
        class="px-4 py-2 rounded font-medium bg-green-600 text-white hover:bg-green-700"
        on:click={increment}
      >
        Count: {count}
      </button>
    </div>
    <p class="status-label">
      Component-scoped style below the Tailwind layer.
    </p>
  </div>
}

@style {
  /* Component-specific rules that complement Tailwind utilities */
  .tw-card {
    padding: 1.5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    max-width: 28rem;
  }
  .status-label {
    font-size: 0.8rem;
    color: var(--muted, #6b7280);
    border-top: 1px dashed var(--border, #e5e7eb);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
}