Adding space to tabs & change class when tab is selected

I want to add spacing between Air Jordans and New Balance. I'd also like to change font weight, size etc., once a tab is selected. I have the below code which works great.
How would I go about the above?

<script>
  import Airjordans from "./airjordans.vue";
  import Nike from "./nike.vue";
  import Adidas from "./adidas.vue";
  import Newbalance from "./newbalance.vue";
  import Reebok from "./reebok.vue";
  import Converse from "./converse.vue";
  import Vans from "./vans.vue";
  import Puma from "./puma.vue";

  export default {
    components: {
      Airjordans,
      Nike,
      Adidas,
      Newbalance,
      Reebok,
      Converse,
      Vans,
      Puma,
    },
    data() {
      return {
        currentTab: 'Adidas',
        tabs: ['Adidas', 'Airjordans', 'Nike', 'Newbalance', 'Reebok', 'Converse', 'Vans', 'Puma']
      }
    },
  }
  </script>

  <template>
    <div class="nav">
      <div class="bg-[#f3f4f6]">
      <div class="max-w-7xl flex flex-1 overflow-auto whitespace-nowrap pl-4 pr-4 lg:pl-10 py-3 space-x-4 ">
      <button  class="font-rubikreg uppercase text-sm "
         v-for="tab in tabs"
         :key="tab"
         :class="['tab-button', { active: currentTab === tab } ]"
         @click="currentTab = tab"
       >
        {{ tab }}
      </button>
    </div>
  </div>

      <div class="bg-[#141414]">
        <Transition name="fade" mode="out-in">
      <component :is="currentTab" class="tab"></component>
    </Transition>
    </div>
    </div>
  </template>