# Can the Tab component be customised?

**URL:** <https://community.plotly.com/t/can-the-tab-component-be-customised/13000>\
**Category:** Dash Python\
**Created:** [August 24, 2018, 9:30am UTC](https://community.plotly.com/t/can-the-tab-component-be-customised/13000 "2018-08-24T09:30:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.plotly.com/u/rory)\
**Post date:** [August 24, 2018, 9:30am UTC](https://community.plotly.com/t/can-the-tab-component-be-customised/13000/1 "2018-08-24T09:30:52Z")

</div>

Hi, I’m wondering if it’s possible to customise Tabs in the current verison of Dash. I tried doing it this way but it didn’t work:

```
 dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab 1r', id='tab-1', value='tab-1r')
], className = 'tabs')

```

And then in the css file:

```
.tabs {
  color: white;
  background: coral;
}
```

---

<div class="post-metadata">

**Author:** ![radekwlsk](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/radekwlsk/32/1385_2.png) [@radekwlsk](https://community.plotly.com/u/radekwlsk)\
**Post date:** [August 24, 2018, 11:28am UTC](https://community.plotly.com/t/can-the-tab-component-be-customised/13000/2 "2018-08-24T11:28:15Z")

</div>

Unfortunately tab’s styles are inline, so to override them you have to use either `!important` CSS sugar or add your own classes and define CSS rules with more specific selectors than the inline ones.

With `dcc.Tabs(id="tabs")` I think the id is only Dash side, meaning the component in HTML does not have such id. The class you are after is `tab-parent`.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 24, 2018, 2:19pm UTC](https://community.plotly.com/t/can-the-tab-component-be-customised/13000/3 "2018-08-24T14:19:15Z")

</div>

We expose several properties that will inject your own CSS, see the `*_className` properties here: [https://dash.plot.ly/dash-core-components/tabs](https://dash.plot.ly/dash-core-components/tabs).

I also recommend just reading through the source code if you need more info on the markup: [https://github.com/plotly/dash-core-components/blob/master/dash\_core\_components/Tabs.py](https://github.com/plotly/dash-core-components/blob/master/dash_core_components/Tabs.py)