How to click outside button and keep active style? - AlpineJS & TailwindCSS

Question

I'm using TailwindCSS and AlpineJS on this project. There are two buttons that switch tabs and the first one have autofocus. When a tab is switched, the other button becomes active:

I want the button to become inactive only when the other button is clicked. Is there a way to do this using AlpineJS and TailwindCSS? Something like bind the active class with @click.away. Thanks in advance. Here is my code:

<div class="flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
         <div x-data="{ openTab: 1, coin: 0 }" class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
            <div class="flex items-center justify-between px-10 py-8 bg-white wrapper">
               <div>
                  <h3 class="lg:text-2xl sm:text-lg">Saldos</h3>
                  <h1 class="font-normal lg:text-4xl sm:text-3xl">$0.00</h1>
               </div>
               <div class="inline-flex items-center justify-center mr-2">
                  <div aria-label="Lista" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none active:text-gray-200 hover:text-gray-200 focus:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 1" autofocus>
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                     </button>
                  </div>
                  <div aria-label="Alocação de Ativos" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none hover:text-gray-200 focus:text-gray-200 active:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
                     </button>
                  </div>
               </div>
            </div>
            <div x-show="openTab === 1">
               etc
            </div>
            <div class="flex flex-col justify-between py-2 bg-white lg:flex-row sm:px-6 lg:px-8" x-show="openTab === 2">
               etc
         </div>
      </div>
   </div>
</div>

Answer 1

You can toggle classes using the Alpine.js x-bind:class object syntax, eg. :class="{ 'active classes': openTab === 1 }" for your first tab, see the following snippet. You could also bind :disabled="openTab !== 1" to disable the button (for the first button).

<div aria-label="Lista" data-balloon-pos="up" id="show-tip">
  <button :class="{ 'active classes': openTab === 1 }" class="p-1 mr-1 text-gray-500 rounded-lg outline-none active:text-gray-200 hover:text-gray-200 focus:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 1" autofocus>
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
  </button>
</div>
<div aria-label="Alocação de Ativos" data-balloon-pos="up" id="show-tip">
  <button :class="{ 'active classes': openTab === 2 }" class="p-1 mr-1 text-gray-500 rounded-lg outline-none hover:text-gray-200 focus:text-gray-200 active:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 2">
  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
  </button>
</div>