Bootstrap-Vue b-tab: CSS does not seem to be applying to active-nav-item-class-CodePudding

I am experimenting with tabs in Bootstrap-Vue. I am trying to adjust the styling on an active tab. From the documentation at https://bootstrap-vue.org/docs/components/tabs#active-classes, I've seen this example that changes the active tab styling. I understand that I am to modify the active-nav-item-class attribute, like so:

<b-tabs
    active-nav-item-class="font-weight-bold text-success"
    active-tab-class="font-weight-bold text-success"
    content-class="mt-3"
>

In my JSFiddle which you can see at https://jsfiddle.net/b4o1kL2f/1/, I am similarly trying to set the active-nav-item-class to a class style in CSS, by binding it with Vue:

<b-tabs  pills vertical :active-nav-item-class="'tab-active-class'">

Here is the CSS:

.tab-active-class {
  background-color: red;
}

But it seems like the active tab background color is not changing. Can anyone spot what I might be doing wrong? Thanks so much!

CodePudding user response：

The class is applying to the HTML element but the problem is that .nav-link.active has specificity more than .tab-active-class, So you have to increase the specificity of .tab-active-class

.nav-link.active.tab-active-class {
  background-color: red;
}

.tab-active-class {
  background-color: red !important;
}