Search code examples
cssangularpaddingvmware-clarity

Add padding-left css property to clarity tabs labels

I have 2 clarity tabs in the project (StackBlitz ref is here).

enter image description here

And I would like to add padding-left property to Tab1 (the tab label itself, not the content) so there will be some space. Using Chrome Dev Tools I found the needed selector . It's ul.nav element inside clr-tabs.

But if I add a css property in app.component.css like this

ul.nav {
  padding-left: 1rem !important;
}

nothing really changes. So how can I add padding property to those tabs?

Solution

  • First, create a CSS class:

    button.tab-button{
  padding: 0 15px;
}

    Then, give that class to the each button on HTML:

    <button clrTabLink id="inputs-link" class="tab-button">Tab1</button>

    and

    <button clrTabLink id="filters-link" class="tab-button">Tab2</button>