Bootstrap type Tab using Tailwing CSS

[Chethan BV]

Hi I need syncfusion bootstrap type Tabs like below .

but I am using Tailwind CSS in which Tab design looks like this:

How to create bootstrap like tab using Tailwind.

[Ravikumar Venkatesan]

Hi Chethan,

Greetings from Syncfusion support.

We have validated your requirement “Bootstrap type Tab using Tailwind CSS” at our end. We suggest you override the bootstrap styles of the tab with the tailwind theme styles as mentioned in the below CSS. We have modified the tab header item's font color based on the tailwind theme and the same is available in the shared sample.

[app.component.html]

<ejs-tab cssClass="bootstrap-tab" >

</ejs-tab>

[app.component.css]

.bootstrap-tab.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text,

.bootstrap-tab.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text,

.bootstrap-tab.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-icon,

.bootstrap-tab.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-icon {

    color: #4f46e5;

}

 

.bootstrap-tab.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {

    color: #6b7280;

}

Sample: https://stackblitz.com/edit/ej2-angular-tab-override-bootstrap-theme-styles?file=app.component.css,app.component.html

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan