Back to all questions

How can I change Tabs border color?

Last updated

Tabs border is added with ::before on the list element. You can use Styles API to change styles of inner elements:

.root {
  @mixin light {
    --border-color: var(--mantine-color-gray-1);
  }

  @mixin dark {
    --border-color: var(--mantine-color-dark-5);
  }
}

.list::before {
  border-color: var(--border-color);
}

.tab:not([data-active]) {
  @mixin hover {
    border-color: var(--border-color);
  }
}