[SOLVED] How do justify tab pane in sveltestrap

How do justify tab pane in sveltestrap

So I have tabs with three element

<script>
  import { TabContent, TabPane } from 'sveltestrap';
</script>

<TabContent>
  <TabPane tabId="alpha" tab="Alpha" active>
    <h2>Alpha</h2>
  </TabPane>
  <TabPane tabId="bravo" tab="Bravo">
    <h2>Bravo</h2>
  </TabPane>
  <TabPane tabId="charlie" tab="Charlie">
    <h2>Charlie</h2>
  </TabPane>
</TabContent>

The problem is it defaults the tab alignment to left, how do I set it to justify, I tried adding nav-justified class in TabPane but it doesn't work

<TabPane class="nav-justified" tabId="alpha" tab="Proses" active>

Last resort would be to have native html tag with bootstrap class to do it, but I was wondering if it was possible with sveltestrap

Solution

Adding classes to component does nothing if it has not been implemented in the component.

But you can style it yourself. Just add a style block and for instance, do this for centering tab elements :

<style>
    :global(.tab-content > ul) {
        justify-content:center;
    }
</style>