Unable to Change/Add CSS in lightning:tab

Question

Trying to add css class in lightning:tab, but always getting the aura:id value as undefind, I am trying to load my third tab as red in color onload of the component.

here is the component

<lightning:tabset selectedTabId="tabRec" aura:id="tabset" >

    <lightning:tab label="Lead1" aura:id="tab1" class="tabPadding">
    <lightning:tab label="Lead2" aura:id="tab2" class="tabPadding">
    <lightning:tab label="Lead3" aura:id="tab3" class="tabPadding">
</lightning:tabset>

Here is the helper, calling this function in init

applyCSS: function(cmp, event) {

        var cmpTarget = cmp.find("tab3");
        alert(JSON.stringify(cmpTarget));

        $A.util.addClass(cmpTarget, 'changeMe');

},

This is style

.THIS .changeMe {
    background:red!important;
}

Answer 1

By default, tabs are lazy loaded. To verify, try getting the id of tab1 instead of tab3. Tab1 will be loaded by default, so you will get the id. But unless and until you click tab 2 and tab 3, they won’t be loaded, hence component.find will return undefined.