diff --git a/packages/client/components/Tab/Tab.tsx b/packages/client/components/Tab/Tab.tsx
index ead610c1aec..d5a8629ab65 100644
--- a/packages/client/components/Tab/Tab.tsx
+++ b/packages/client/components/Tab/Tab.tsx
@@ -13,8 +13,8 @@ const Tab = forwardRef((props: Props, ref: Ref<HTMLButtonElement>) => {
   return (
     <button
       className={cn(
-        'flex cursor-default select-none appearance-none items-center justify-center border-0 px-4 py-3 text-sm leading-5 text-grape-600 outline-0',
-        isActive ? 'text-grape-700' : 'cursor-pointer',
+        'flex cursor-default select-none appearance-none items-center justify-center border-0 bg-inherit px-4 py-3 text-sm leading-5 outline-0',
+        isActive ? 'text-grape-700' : 'cursor-pointer text-slate-600',
         className
       )}
       onClick={onClick}
diff --git a/packages/client/tailwindTheme.ts b/packages/client/tailwindTheme.ts
index bd4b95d4304..baa256aa7cb 100644
--- a/packages/client/tailwindTheme.ts
+++ b/packages/client/tailwindTheme.ts
@@ -7,6 +7,7 @@ export default {
   theme: {
     colors: {
       transparent: 'transparent',
+      inherit: 'inherit',
       current: 'currentColor',
       black: defaultColors.black,
       white: defaultColors.white,