@Ilia & @metalsadman thanks a lot didn’t know that about the scoped property

thank you I’ll try it out.

@dobbel any idea on changing the bottom border?

@dobbel Thank you very much had to remove the scoped property from the styles but finally worked.

I can’t change table row highlight when hovering and selected.
Tried with before and after selectors and with v-deep modifier but didn’t work

@Ilia & @metalsadman thanks a lot didn’t know that about the scoped property

@Ilia nope, didn’t work. I’m using a router-tab, don’t know if that makes any difference.

<template>
...
<q-tabs active-color="primary" align="left" class="custom-tab" dense>
        <q-route-tab :key="tab.label" :to="tab.to"
                     v-for="tab in headerRoutes" class="q-tab__label">
          {{tab.label}}
        </q-route-tab>
</q-tabs>
...
</template>
<style lang="scss" scoped>
.custom-tab {
    font-size: 12pt;
  }

  .q-tab__active .q-tab__label {
    font-weight: 900;
  }
</style>

I wan’t to give the selected tab a bolder font weight, Since there is an active-color and active-bg-color property, I guess there’s gotta be a way of achieving this as well. Thanks in advance.

@dobbel I see. I found a workoround styling tabs. But the button felt like a more natural choice.

I want to give the unselected buttons an outline design and space them a little, tried using outline in the toggle along with gutter but it outlines the whole element while I want an outline applied for each button.