diff --git a/src/renderer/App.css b/src/renderer/App.css
index 7ad151b8a..f3dce740b 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -23,7 +23,55 @@
 @import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";
 
 /** Tailwind CSS Configuration */
-@config '../../tailwind.config.ts';
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --text-xxs: 0.625rem;
+
+  --color-gitify-font: var(--fgColor-default);
+  --color-gitify-background: var(--bgColor-muted);
+  --color-gitify-sidebar: #24292e;
+  --color-gitify-footer: var(--bgColor-neutral-muted);
+  --color-gitify-caution: var(--color-orange-600);
+  --color-gitify-error: var(--fgColor-danger);
+  --color-gitify-link: var(--fgColor-link);
+
+  --color-gitify-input-rest: var(--control-bgColor-rest);
+  --color-gitify-input-focus: var(--control-bgColor-active);
+
+  --color-gitify-icon-attention: var(--fgColor-attention);
+  --color-gitify-icon-closed: var(--fgColor-closed);
+  --color-gitify-icon-done: var(--fgColor-done);
+  --color-gitify-icon-muted: var(--fgColor-muted);
+  --color-gitify-icon-open: var(--fgColor-open);
+
+  --color-gitify-accounts: var(--bgColor-neutral-muted);
+
+  --color-gitify-account-rest: var(--control-bgColor-active);
+  --color-gitify-account-error: var(--bgColor-danger-emphasis);
+
+  --color-gitify-repository: var(--control-bgColor-disabled);
+
+  --color-gitify-notification-border: var(--borderColor-disabled);
+  --color-gitify-notification-hover: var(--control-bgColor-hover);
+
+  --color-gitify-notification-pill-hover: var(--control-bgColor-active);
+
+  --color-gitify-tooltip-icon: var(--fgColor-accent);
+  --color-gitify-tooltip-popout: var(--bgColor-disabled);
+
+  --gitify-scrollbar-track: var(--color-gray-100);
+  --gitify-scrollbar-thumb: var(--color-gray-300);
+  --gitify-scrollbar-thumb-hover: var(--color-gray-400);
+}
+
+@layer dark {
+  @theme {
+    --gitify-scrollbar-track: var(--color-gray-900);
+    --gitify-scrollbar-thumb: var(--color-gray-700);
+    --gitify-scrollbar-thumb-hover: var(--color-gray-600);
+  }
+}
 
 html,
 body,
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 4d2206460..000000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Config } from 'tailwindcss';
-import colors from 'tailwindcss/colors';
-
-const config: Config = {
-  content: ['./src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      fontSize: {
-        xxs: '0.625rem', // 10px
-      },
-      colors: {
-        gitify: {
-          font: 'var(--fgColor-default)',
-          background: 'var(--bgColor-muted)',
-          sidebar: '#24292e',
-          footer: 'var(--bgColor-neutral-muted)',
-
-          caution: colors.orange[600],
-          error: 'var(--fgColor-danger)',
-          link: 'var(--fgColor-link)',
-          input: {
-            rest: 'var(--control-bgColor-rest)',
-            focus: 'var(--control-bgColor-active)',
-          },
-
-          icon: {
-            attention: 'var(--fgColor-attention)',
-            closed: 'var(--fgColor-closed)',
-            done: 'var(--fgColor-done)',
-            muted: 'var(--fgColor-muted)',
-            open: 'var(--fgColor-open)',
-          },
-
-          accounts: 'var(--bgColor-neutral-muted)',
-
-          account: {
-            rest: 'var(--control-bgColor-active)',
-            error: 'var(--bgColor-danger-emphasis)',
-          },
-
-          repository: 'var(--control-bgColor-disabled)',
-
-          notification: {
-            border: 'var(--borderColor-disabled)',
-            hover: 'var(--control-bgColor-hover)',
-            pill: {
-              hover: 'var(--control-bgColor-active)',
-            },
-          },
-
-          tooltip: {
-            icon: 'var(--fgColor-accent)',
-            popout: 'var(--bgColor-disabled)',
-          },
-        },
-      },
-    },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
-    ({ addBase }) => {
-      // TODO - ideally we would move this to be controlled by GitHub Primer Design Tokens, colors and color schemes
-      addBase({
-        ':root': {
-          '--gitify-scrollbar-track': colors.gray[100],
-          '--gitify-scrollbar-thumb': colors.gray[300],
-          '--gitify-scrollbar-thumb-hover': colors.gray[400],
-        },
-        '.dark': {
-          '--gitify-scrollbar-track': colors.gray[900],
-          '--gitify-scrollbar-thumb': colors.gray[700],
-          '--gitify-scrollbar-thumb-hover': colors.gray[600],
-        },
-      });
-    },
-  ],
-};
-
-export default config;