Multi-Colored Tabs in Tab Container

Hi – I saw this post that mentions changing color of tabs in a tab container … If anyone’s been able to do this, can you provide some places to get started? I’ve been trying CSS and it’s not working. Thanks for any tips
2 answers
  • Set a name for tabContainer e.g., ‘myTabContainer’
  • Set names for tabPages e.g., ‘myTab1’ and ‘myTab2’

Now in custom.css file add css to style your tabs which are myTab1 and myTab2

.mx-name-myTabContainer .mx-name-myTab1 {
    background: black !important;
    color: white !important;

.mx-name-myTabContainer .mx-name-myTab2 {
    background: orange !important;
    color: black !important;

The above css will result in black tab1 with white font color and orange tab2 with black font color

For information on how to add custom css in your app, see


My settings.json file is right under the “theme” folder … Does it matter where the CSS file is located? I saw a ._custom.scss file and wondering if that’s what I could use … That is under \theme\sass\pattern-library-overrides\