diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
index 0160d13280c..0418cb7fedf 100644
--- a/apps/design-system/styles/globals.css
+++ b/apps/design-system/styles/globals.css
@@ -1,14 +1,19 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
-
-@config '../tailwind.config.js';
-
 @import 'config/typography.css';
 
+@source '../app/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../registry/**/*.{js,ts,jsx,tsx}';
+@source '../content/**/*.mdx';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
+@theme {
+  /* added to get max-w-site */
+  --container-site: 128rem;
+}
+
 @layer base {
   :root {
     --chart-1: 12 76% 61%;
diff --git a/apps/design-system/tailwind.config.js b/apps/design-system/tailwind.config.js
deleted file mode 100644
index e329c8e381e..00000000000
--- a/apps/design-system/tailwind.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const config = require('config/tailwind.config')
-
-module.exports = config({
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './registry/**/*.{js,ts,jsx,tsx}',
-    './content/**/*.mdx',
-    // purge styles from grid library
-    //
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {
-      maxWidth: {
-        site: '128rem',
-      },
-    },
-  },
-})
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index d5bad10e70d..aea0eb429ee 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,7 +1,7 @@
 import '@code-hike/mdx/styles.css'
 import 'config/code-hike.css'
 import 'ui-patterns/ShimmeringLoader/index.css'
-import '../styles/main.css'
+import '../styles/globals.css'
 import '../styles/prism-okaidia.css'
 
 import { GlobalProviders } from '~/features/app.providers'
diff --git a/apps/docs/styles/main.css b/apps/docs/styles/globals.css
similarity index 93%
rename from apps/docs/styles/main.css
rename to apps/docs/styles/globals.css
index de09695612f..8e74b564762 100644
--- a/apps/docs/styles/main.css
+++ b/apps/docs/styles/globals.css
@@ -1,11 +1,21 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
 
-@config '../tailwind.config.cjs';
+@source '../app/**/*.{ts,tsx,mdx}';
+@source '../components/**/*.tsx';
+@source '../content/**/*.{ts,tsx,mdx}';
+@source '../docs/**/*.{tsx,mdx}';
+@source '../features/**/*.{ts,tsx,mdx}';
+@source '../layouts/**/*.tsx';
+@source '../pages/**/*.{tsx,mdx}';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
+@layer utilities {
+  .prose--remove-p-margin p {
+    margin: 0;
+  }
+}
 
 @layer base {
   *,
@@ -260,10 +270,8 @@ article p code {
 }
 
 /*
-* sets the image in @Next/Image components
-* to respect the height of the content
-*
-*/
+ * sets the image in @Next/Image components to respect the height of the content
+ */
 .next-image--dynamic-fill {
   width: 100%;
   grid-column: 1 / -1;
diff --git a/apps/docs/styles/prism-okaidia.css b/apps/docs/styles/prism-okaidia.css
index d27f85f1667..d3a7d4ed094 100644
--- a/apps/docs/styles/prism-okaidia.css
+++ b/apps/docs/styles/prism-okaidia.css
@@ -1,4 +1,4 @@
-@reference './main.css';
+@reference './globals.css';
 /**
  * okaidia theme for JavaScript, CSS and HTML
  * Loosely based on Monokai textmate theme by http://www.monokai.nl/
diff --git a/apps/docs/tailwind.config.cjs b/apps/docs/tailwind.config.cjs
deleted file mode 100644
index e442579b818..00000000000
--- a/apps/docs/tailwind.config.cjs
+++ /dev/null
@@ -1,26 +0,0 @@
-const config = require('config/tailwind.config')
-
-module.exports = config({
-  content: [
-    './app/**/*.{ts,tsx,mdx}',
-    './components/**/*.tsx',
-    './content/**/*.{ts,tsx,mdx}',
-    './docs/**/*.{tsx,mdx}',
-    './features/**/*.{ts,tsx,mdx}',
-    './layouts/**/*.tsx',
-    './pages/**/*.{tsx,mdx}',
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  plugins: [
-    function ({ addUtilities, addVariant }) {
-      addUtilities({
-        // prose (tailwind typography) helpers
-        // useful for removing margins in prose styled sections
-        '.prose--remove-p-margin p': {
-          margin: '0',
-        },
-      })
-    },
-  ],
-})
diff --git a/apps/learn/styles/globals.css b/apps/learn/styles/globals.css
index 54735e85e71..84065d57ffa 100644
--- a/apps/learn/styles/globals.css
+++ b/apps/learn/styles/globals.css
@@ -1,11 +1,41 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
 
-@config '../tailwind.config.js';
+@source '../app/**/*.{ts,tsx}';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
+@theme {
+  /* added to get max-w-site */
+  --container-site: 128rem;
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+}
 
 @layer base {
   :root {
diff --git a/apps/learn/tailwind.config.js b/apps/learn/tailwind.config.js
deleted file mode 100644
index 9b80c0ac1c4..00000000000
--- a/apps/learn/tailwind.config.js
+++ /dev/null
@@ -1,70 +0,0 @@
-const config = require('config/tailwind.config')
-
-module.exports = config({
-  darkMode: ['class'],
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './registry/**/*.{js,ts,jsx,tsx}',
-    // purge styles from grid library
-    //
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {
-      maxWidth: {
-        site: '128rem',
-      },
-      // The following variables are needed for the shadcn components in the examples to work. They're not clashing
-      // with the variables in the ui package.
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
-    },
-  },
-})
diff --git a/apps/lite-studio/app/root.tsx b/apps/lite-studio/app/root.tsx
index 6ea72dfb0f6..b0fab81420b 100644
--- a/apps/lite-studio/app/root.tsx
+++ b/apps/lite-studio/app/root.tsx
@@ -2,7 +2,7 @@ import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration }
 
 import type { Route } from './+types/root'
 
-import './app.css'
+import '../styles/globals.css'
 
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
diff --git a/apps/lite-studio/app/app.css b/apps/lite-studio/styles/globals.css
similarity index 76%
rename from apps/lite-studio/app/app.css
rename to apps/lite-studio/styles/globals.css
index 1361ee2608d..00841bfbe7e 100644
--- a/apps/lite-studio/app/app.css
+++ b/apps/lite-studio/styles/globals.css
@@ -1,14 +1,11 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
-
-@config '../tailwind.config.js';
-
 @import 'config/typography.css';
 
+@source '../app/**/*.{ts,tsx}';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
 @font-face {
   font-family: 'custom-font';
   src:
diff --git a/apps/lite-studio/tailwind.config.js b/apps/lite-studio/tailwind.config.js
deleted file mode 100644
index 878da4640a6..00000000000
--- a/apps/lite-studio/tailwind.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const config = require('config/tailwind.config')
-
-/** @type {import('tailwindcss').Config} */
-export default config({
-  content: [
-    './app/**/*.{ts,tsx}',
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {},
-  },
-})
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
index e6c351cf871..ff28fedbefd 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
@@ -1,4 +1,4 @@
-@reference "../../../../styles/main.css";
+@reference "../../../../styles/globals.css";
 
 .root :global(.graphiql-sidebar) {
   @apply border-r border-default;
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index c764c35b254..48677f1b122 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -4,7 +4,7 @@ import '@/styles/editor.css'
 import '@/styles/focus.css'
 import '@/styles/graphiql-base.css'
 import '@/styles/grid.css'
-import '@/styles/main.css'
+import '@/styles/globals.css'
 import '@/styles/markdown-preview.css'
 import '@/styles/monaco.css'
 import '@/styles/react-data-grid-logs.css'
diff --git a/apps/studio/styles/code.css b/apps/studio/styles/code.css
index fa6f220e679..57e5638bd62 100644
--- a/apps/studio/styles/code.css
+++ b/apps/studio/styles/code.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .Code {
   width: 100%;
diff --git a/apps/studio/styles/editor.css b/apps/studio/styles/editor.css
index e0afe99728a..3f028e8c9e0 100644
--- a/apps/studio/styles/editor.css
+++ b/apps/studio/styles/editor.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .table-editor-columns .sbui-formlayout--responsive {
   gap: 0rem !important;
diff --git a/apps/studio/styles/focus.css b/apps/studio/styles/focus.css
index b3105ba6122..605031f36d1 100644
--- a/apps/studio/styles/focus.css
+++ b/apps/studio/styles/focus.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 /* Focus styles for keyboard navigation on interactive table rows */
 .inset-focus {
diff --git a/apps/studio/styles/main.css b/apps/studio/styles/globals.css
similarity index 66%
rename from apps/studio/styles/main.css
rename to apps/studio/styles/globals.css
index 1f67a7fb451..4dd802baea9 100644
--- a/apps/studio/styles/main.css
+++ b/apps/studio/styles/globals.css
@@ -1,13 +1,112 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
-
 @import 'config/typography.css';
 
-@config '../tailwind.config.ts';
+@source '../pages/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
+@theme {
+  --text-grid: 13px;
+
+  --color-typography-body-light: hsl(var(--foreground-light));
+  --color-typography-body-dark: hsl(var(--foreground-light));
+  --color-typography-body-secondary-light: hsl(var(--foreground-lighter));
+  --color-typography-body-secondary-dark: hsl(var(--foreground-lighter));
+  --color-typography-body-strong-light: hsl(var(--foreground-default));
+  --color-typography-body-strong-dark: hsl(var(--foreground-default));
+  --color-typography-body-faded-light: hsl(var(--foreground-muted));
+  --color-typography-body-faded-dark: hsl(var(--foreground-muted));
+
+  --color-table-body-light: hsl(var(--background-default));
+  --color-table-body-dark: hsl(var(--background-default));
+  --color-table-header-light: hsl(var(--background-surface-100));
+  --color-table-header-dark: hsl(var(--background-surface-100));
+  --color-table-footer-light: hsl(var(--background-surface-100));
+  --color-table-footer-dark: hsl(var(--background-surface-100));
+  --color-table-border-light: hsl(var(--border-default));
+  --color-table-border-dark: hsl(var(--border-default));
+
+  --color-panel-body-light: hsl(var(--background-surface-100));
+  --color-panel-body-dark: hsl(var(--background-surface-100));
+  --color-panel-header-light: hsl(var(--background-surface-100));
+  --color-panel-header-dark: hsl(var(--background-surface-100));
+  --color-panel-footer-light: hsl(var(--background-surface-100));
+  --color-panel-footer-dark: hsl(var(--background-surface-100));
+  --color-panel-border-light: hsl(var(--border-default));
+  --color-panel-border-dark: hsl(var(--border-default));
+  --color-panel-border-interior-light: hsl(var(--border-muted));
+  --color-panel-border-interior-dark: hsl(var(--border-muted));
+  --color-panel-border-hover-light: hsl(var(--border-muted));
+  --color-panel-border-hover-dark: hsl(var(--border-muted));
+
+  --animate-shimmer: shimmer 2s infinite linear;
+  --animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
+  --animate-badge-pulse: badge-pulse 3s ease-in-out infinite;
+  --animate-chevron-up: chevron-up 2s ease-in-out infinite;
+  --animate-sway: sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes badge-shimmer {
+  0% {
+    transform: rotate(-45deg) translateX(-100%);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  40% {
+    opacity: 1;
+  }
+  50% {
+    transform: rotate(-45deg) translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: rotate(-45deg) translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes badge-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes chevron-up {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes sway {
+  0%,
+  100% {
+    transform: rotate(-10deg) scale(1.5) translateY(4rem);
+  }
+  50% {
+    transform: rotate(10deg) scale(1.5) translateY(2rem);
+  }
+}
 
 :root {
   --chart-1: var(--brand-default);
diff --git a/apps/studio/styles/grid.css b/apps/studio/styles/grid.css
index 947d3959531..a79accae238 100644
--- a/apps/studio/styles/grid.css
+++ b/apps/studio/styles/grid.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .sb-grid {
   @apply flex h-full flex-col;
diff --git a/apps/studio/styles/markdown-preview.css b/apps/studio/styles/markdown-preview.css
index d71301c80dd..a28329edadb 100644
--- a/apps/studio/styles/markdown-preview.css
+++ b/apps/studio/styles/markdown-preview.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 /* [Joshen] https://github.com/sindresorhus/github-markdown-css */
 
 @media (prefers-color-scheme: dark) {
diff --git a/apps/studio/styles/monaco.css b/apps/studio/styles/monaco.css
index 81a8adb3c2a..959851fdf0a 100644
--- a/apps/studio/styles/monaco.css
+++ b/apps/studio/styles/monaco.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .monaco-editor {
   @apply relative overflow-visible;
diff --git a/apps/studio/styles/react-data-grid-logs.css b/apps/studio/styles/react-data-grid-logs.css
index e2b4d744175..3f84b9bcf8c 100644
--- a/apps/studio/styles/react-data-grid-logs.css
+++ b/apps/studio/styles/react-data-grid-logs.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .data-grid--simple-logs {
   .rdg {
diff --git a/apps/studio/styles/reactflow.css b/apps/studio/styles/reactflow.css
index ca7bd8d553f..62e1a494528 100644
--- a/apps/studio/styles/reactflow.css
+++ b/apps/studio/styles/reactflow.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .instance-configuration {
   .react-flow__pane {
diff --git a/apps/studio/styles/storage.css b/apps/studio/styles/storage.css
index f60f83a935b..b3cbbdc3a9a 100644
--- a/apps/studio/styles/storage.css
+++ b/apps/studio/styles/storage.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 
 .storage-container {
   .sbui-space-col {
diff --git a/apps/studio/styles/ui.css b/apps/studio/styles/ui.css
index 8280ecec89e..5ae7f536efd 100644
--- a/apps/studio/styles/ui.css
+++ b/apps/studio/styles/ui.css
@@ -1,4 +1,4 @@
-@reference "./main.css";
+@reference "./globals.css";
 /* Brought over from platform to be cleaned if needed */
 
 /* Form panels */
diff --git a/apps/studio/tailwind.config.ts b/apps/studio/tailwind.config.ts
deleted file mode 100644
index f437668ed44..00000000000
--- a/apps/studio/tailwind.config.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable no-restricted-exports */
-
-import tailwindConfig from 'config/tailwind.config'
-
-export default tailwindConfig({
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    // purge styles from grid library
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {
-      fontSize: {
-        grid: '13px',
-      },
-      colors: {
-        /*  typography */
-        'typography-body': {
-          light: 'hsl(var(--foreground-light))',
-          dark: 'hsl(var(--foreground-light))',
-        },
-        'typography-body-secondary': {
-          light: 'hsl(var(--foreground-lighter))',
-          dark: 'hsl(var(--foreground-lighter))',
-        },
-        'typography-body-strong': {
-          light: 'hsl(var(--foreground-default))',
-          dark: 'hsl(var(--foreground-default))',
-        },
-        'typography-body-faded': {
-          light: 'hsl(var(--foreground-muted))',
-          dark: 'hsl(var(--foreground-muted))',
-        },
-
-        /* Tables */
-        'table-body': {
-          light: 'hsl(var(--background-default))',
-          dark: 'hsl(var(--background-default))',
-        },
-        'table-header': {
-          light: 'hsl(var(--background-surface-100))',
-          dark: 'hsl(var(--background-surface-100))',
-        },
-        'table-footer': {
-          light: 'hsl(var(--background-surface-100))',
-          dark: 'hsl(var(--background-surface-100))',
-        },
-        'table-border': {
-          light: 'hsl(var(--border-default))',
-          dark: 'hsl(var(--border-default))',
-        },
-
-        /* Panels */
-        'panel-body': {
-          light: 'hsl(var(--background-surface-100))',
-          dark: 'hsl(var(--background-surface-100))',
-        },
-        'panel-header': {
-          light: 'hsl(var(--background-surface-100))',
-          dark: 'hsl(var(--background-surface-100))',
-        },
-        'panel-footer': {
-          light: 'hsl(var(--background-surface-100))',
-          dark: 'hsl(var(--background-surface-100))',
-        },
-        'panel-border': {
-          light: 'hsl(var(--border-default))',
-          dark: 'hsl(var(--border-default))',
-        },
-        'panel-border-interior': {
-          light: 'hsl(var(--border-muted))',
-          dark: 'hsl(var(--border-muted))',
-        },
-        'panel-border-hover': {
-          light: 'hsl(var(--border-muted))',
-          dark: 'hsl(var(--border-muted))',
-        },
-      },
-
-      animation: {
-        shimmer: 'shimmer 2s infinite linear',
-        'badge-shimmer': 'badge-shimmer 3s ease-in-out infinite',
-        'badge-pulse': 'badge-pulse 3s ease-in-out infinite',
-        'chevron-up': 'chevron-up 2s ease-in-out infinite',
-        sway: 'sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      },
-      keyframes: {
-        shimmer: {
-          '0%': {
-            'background-position': '-1000px 0',
-          },
-          '100%': {
-            'background-position': '1000px 0',
-          },
-        },
-        'badge-shimmer': {
-          '0%': { transform: 'rotate(-45deg) translateX(-100%)', opacity: '0' },
-          '10%': { opacity: '1' },
-          '40%': { opacity: '1' },
-          '50%': { transform: 'rotate(-45deg) translateX(100%)', opacity: '0' },
-          '100%': { transform: 'rotate(-45deg) translateX(100%)', opacity: '0' },
-        },
-        'badge-pulse': {
-          '0%, 100%': { opacity: '1' },
-          '50%': { opacity: '0.8' },
-        },
-        'chevron-up': {
-          '0%, 100%': { opacity: '0.2' },
-          '50%': { opacity: '1' },
-        },
-        sway: {
-          '0%, 100%': {
-            transform: 'rotate(-10deg) scale(1.5) translateY(4rem)',
-          },
-          '50%': {
-            transform: 'rotate(10deg) scale(1.5) translateY(2rem)',
-          },
-        },
-      },
-    },
-  },
-})
diff --git a/apps/ui-library/app/example/password-based-auth/layout.tsx b/apps/ui-library/app/example/password-based-auth/layout.tsx
index df06062cea4..9ac281b3fb6 100644
--- a/apps/ui-library/app/example/password-based-auth/layout.tsx
+++ b/apps/ui-library/app/example/password-based-auth/layout.tsx
@@ -1,4 +1,3 @@
-import { html } from 'monaco-editor'
 import { Metadata } from 'next'
 
 import { BaseInjector } from './../base-injector'
diff --git a/apps/ui-library/next.config.mjs b/apps/ui-library/next.config.mjs
index 597f4432bea..24035a3e7cb 100644
--- a/apps/ui-library/next.config.mjs
+++ b/apps/ui-library/next.config.mjs
@@ -32,10 +32,6 @@ const nextConfig = {
       },
     ]
   },
-  eslint: {
-    // We are already running linting via GH action, this will skip linting during production build on Vercel
-    ignoreDuringBuilds: true,
-  },
 }
 
 export default withContentlayer(nextConfig)
diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json
index 32634d6cfeb..6f6824fa683 100644
--- a/apps/ui-library/package.json
+++ b/apps/ui-library/package.json
@@ -6,9 +6,10 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "next dev --port 3004",
-    "build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && next build --turbopack",
+    "build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && pnpm run build:app",
     "build:registry": "rimraf -G public/r/* && tsx ./scripts/build-registry.mts && shadcn build public/r/registry.json && tsx scripts/clean-registry.ts",
     "build:llms": "tsx ./scripts/build-llms-txt.ts",
+    "build:app": "next build --turbopack",
     "start": "next start",
     "lint": "eslint .",
     "lint:mdx": "supa-mdx-lint content --config ../../supa-mdx-lint.config.toml",
diff --git a/apps/ui-library/styles/globals.css b/apps/ui-library/styles/globals.css
index 54735e85e71..ecb962acc24 100644
--- a/apps/ui-library/styles/globals.css
+++ b/apps/ui-library/styles/globals.css
@@ -1,82 +1,120 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
 
-@config '../tailwind.config.js';
+@source '../app/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../registry/**/*.{js,ts,jsx,tsx}';
+@source '../content/**/*.mdx';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+
+@theme {
+  /* added to get max-w-site */
+  --container-site: 128rem;
+
+  /* The following are needed to render the examples, since they use regular shadcn variables. Some classes are 
+   * commented out classes because they clashed with Supabase defined classes 
+   */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  /* --color-background: hsl(var(--background)); */
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  /* --color-border: hsl(var(--border)); */
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+}
 
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
+    --foreground: 0 0% 14.5%;
     --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
+    --card-foreground: 0 0% 14.5%;
     --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 84.2% 60.2%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 220 13% 70.8%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --popover-foreground: 0 0% 14.5%;
+    --primary: 0 0% 20.5%;
+    --primary-foreground: 0 0% 98.5%;
+    --secondary: 0 0% 97%;
+    --secondary-foreground: 0 0% 20.5%;
+    --muted: 0 0% 97%;
+    --muted-foreground: 0 0% 55.6%;
+    --accent: 0 0% 97%;
+    --accent-foreground: 0 0% 20.5%;
+    --destructive: 27.3 24.5% 57.7%;
+    --destructive-foreground: 27.3 24.5% 57.7%;
+    --border: 0 0% 92.2%;
+    --input: 0 0% 92.2%;
+    --ring: 0 0% 70.8%;
+    --chart-1: 41.1 22.2% 64.6%;
+    --chart-2: 184.7 11.8% 60%;
+    --chart-3: 227.4 7% 39.8%;
+    --chart-4: 84.4 18.9% 82.8%;
+    --chart-5: 70.1 18.8% 76.9%;
     --radius: 0.625rem;
-    --sidebar: 210 20% 98.5%;
-    --sidebar-foreground: 224 71.4% 4.1%;
-    --sidebar-primary: 220.9 39.3% 11%;
-    --sidebar-primary-foreground: 210 20% 98%;
-    --sidebar-accent: 220 14.3% 95.9%;
-    --sidebar-accent-foreground: 220.9 39.3% 11%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 220 13% 70.8%;
+    --sidebar: 0 0% 98.5%;
+    --sidebar-foreground: 0 0% 14.5%;
+    --sidebar-primary: 0 0% 20.5%;
+    --sidebar-primary-foreground: 0 0% 98.5%;
+    --sidebar-accent: 0 0% 97%;
+    --sidebar-accent-foreground: 0 0% 20.5%;
+    --sidebar-border: 0 0% 92.2%;
+    --sidebar-ring: 0 0% 70.8%;
   }
 
-  .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 84.2% 60.2%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 217.9 10.6% 55.6%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar: 220.9 39.3% 11%;
-    --sidebar-foreground: 210 20% 98%;
-    --sidebar-primary: 220 70% 50%;
-    --sidebar-primary-foreground: 210 20% 98%;
-    --sidebar-accent: 215 27.9% 16.9%;
-    --sidebar-accent-foreground: 210 20% 98%;
-    --sidebar-border: 215 27.9% 16.9%;
-    --sidebar-ring: 220 13% 43.9%;
+  [data-theme='dark'],
+  [data-theme='classic-dark'] {
+    --background: 0 0% 14.5%;
+    --foreground: 0 0% 98.5%;
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 98.5%;
+    --popover: 0 0% 14.5%;
+    --popover-foreground: 0 0% 98.5%;
+    --primary: 0 0% 98.5%;
+    --primary-foreground: 0 0% 20.5%;
+    --secondary: 0 0% 26.9%;
+    --secondary-foreground: 0 0% 98.5%;
+    --muted: 0 0% 26.9%;
+    --muted-foreground: 0 0% 70.8%;
+    --accent: 0 0% 26.9%;
+    --accent-foreground: 0 0% 98.5%;
+    --destructive: 25.7 14.1% 39.6%;
+    --destructive-foreground: 25.3 23.7% 63.7%;
+    --border: 0 0% 26.9%;
+    --input: 0 0% 26.9%;
+    --ring: 0 0% 55.6%;
+    --chart-1: 264.4 24.3% 48.8%;
+    --chart-2: 162.5 17% 69.6%;
+    --chart-3: 70.1 18.8% 76.9%;
+    --chart-4: 303.9 26.5% 62.7%;
+    --chart-5: 16.4 24.6% 64.5%;
+    --sidebar: 0 0% 20.5%;
+    --sidebar-foreground: 0 0% 98.5%;
+    --sidebar-primary: 264.4 24.3% 48.8%;
+    --sidebar-primary-foreground: 0 0% 98.5%;
+    --sidebar-accent: 0 0% 26.9%;
+    --sidebar-accent-foreground: 0 0% 98.5%;
+    --sidebar-border: 0 0% 26.9%;
+    --sidebar-ring: 0 0% 43.9%;
   }
 }
 
@@ -122,78 +160,6 @@
   }
 }
 
-.preview {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 14.5%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 14.5%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 14.5%;
-  --primary: 0 0% 20.5%;
-  --primary-foreground: 0 0% 98.5%;
-  --secondary: 0 0% 97%;
-  --secondary-foreground: 0 0% 20.5%;
-  --muted: 0 0% 97%;
-  --muted-foreground: 0 0% 55.6%;
-  --accent: 0 0% 97%;
-  --accent-foreground: 0 0% 20.5%;
-  --destructive: 27.3 24.5% 57.7%;
-  --destructive-foreground: 27.3 24.5% 57.7%;
-  --border: 0 0% 92.2%;
-  --input: 0 0% 92.2%;
-  --ring: 0 0% 70.8%;
-  --chart-1: 41.1 22.2% 64.6%;
-  --chart-2: 184.7 11.8% 60%;
-  --chart-3: 227.4 7% 39.8%;
-  --chart-4: 84.4 18.9% 82.8%;
-  --chart-5: 70.1 18.8% 76.9%;
-  --radius: 0.625rem;
-  --sidebar: 0 0% 98.5%;
-  --sidebar-foreground: 0 0% 14.5%;
-  --sidebar-primary: 0 0% 20.5%;
-  --sidebar-primary-foreground: 0 0% 98.5%;
-  --sidebar-accent: 0 0% 97%;
-  --sidebar-accent-foreground: 0 0% 20.5%;
-  --sidebar-border: 0 0% 92.2%;
-  --sidebar-ring: 0 0% 70.8%;
-}
-
-[data-theme='dark'] .preview,
-[data-theme='classic-dark'] .preview {
-  --background: 0 0% 14.5%;
-  --foreground: 0 0% 98.5%;
-  --card: 0 0% 0%;
-  --card-foreground: 0 0% 98.5%;
-  --popover: 0 0% 14.5%;
-  --popover-foreground: 0 0% 98.5%;
-  --primary: 0 0% 98.5%;
-  --primary-foreground: 0 0% 20.5%;
-  --secondary: 0 0% 26.9%;
-  --secondary-foreground: 0 0% 98.5%;
-  --muted: 0 0% 26.9%;
-  --muted-foreground: 0 0% 70.8%;
-  --accent: 0 0% 26.9%;
-  --accent-foreground: 0 0% 98.5%;
-  --destructive: 25.7 14.1% 39.6%;
-  --destructive-foreground: 25.3 23.7% 63.7%;
-  --border: 0 0% 26.9%;
-  --input: 0 0% 26.9%;
-  --ring: 0 0% 55.6%;
-  --chart-1: 264.4 24.3% 48.8%;
-  --chart-2: 162.5 17% 69.6%;
-  --chart-3: 70.1 18.8% 76.9%;
-  --chart-4: 303.9 26.5% 62.7%;
-  --chart-5: 16.4 24.6% 64.5%;
-  --sidebar: 0 0% 20.5%;
-  --sidebar-foreground: 0 0% 98.5%;
-  --sidebar-primary: 264.4 24.3% 48.8%;
-  --sidebar-primary-foreground: 0 0% 98.5%;
-  --sidebar-accent: 0 0% 26.9%;
-  --sidebar-accent-foreground: 0 0% 98.5%;
-  --sidebar-border: 0 0% 26.9%;
-  --sidebar-ring: 0 0% 43.9%;
-}
-
 .preview * {
   @apply border-border outline-ring/50;
 }
diff --git a/apps/ui-library/tailwind.config.js b/apps/ui-library/tailwind.config.js
deleted file mode 100644
index 7511b9982c8..00000000000
--- a/apps/ui-library/tailwind.config.js
+++ /dev/null
@@ -1,69 +0,0 @@
-const config = require('config/tailwind.config')
-
-module.exports = config({
-  darkMode: ['class'],
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './registry/**/*.{js,ts,jsx,tsx}',
-    './content/**/*.mdx',
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {
-      maxWidth: {
-        site: '128rem',
-      },
-      // The following variables are needed for the shadcn components in the examples to work. They're not clashing
-      // with the variables in the ui package.
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
-    },
-  },
-})
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 4c745171754..3ca0f453d36 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,6 +1,6 @@
 import '@code-hike/mdx/styles.css'
 import 'config/code-hike.css'
-import '../styles/index.css'
+import '../styles/globals.css'
 import '../pages/launch-week/launchWeek.css'
 
 import { Metadata } from 'next'
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 1af7637f23f..bb274f0ddb0 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -1,6 +1,6 @@
 import '@code-hike/mdx/styles.css'
 import 'config/code-hike.css'
-import '../styles/index.css'
+import '../styles/globals.css'
 import './launch-week/launchWeek.css'
 
 import {
diff --git a/apps/www/styles/career.module.css b/apps/www/styles/career.module.css
index 118c015834f..2a8e056c5e9 100644
--- a/apps/www/styles/career.module.css
+++ b/apps/www/styles/career.module.css
@@ -1,4 +1,4 @@
-@reference './index.css';
+@reference './globals.css';
 
 .contributors-bg-circle {
   @apply bg-gradient-to-r from-background-alternative via-border-strong to-background-alternative rounded-full p-[1px] aspect-square absolute;
diff --git a/apps/www/styles/index.css b/apps/www/styles/globals.css
similarity index 86%
rename from apps/www/styles/index.css
rename to apps/www/styles/globals.css
index 11cd4813093..844327e8c1a 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/globals.css
@@ -1,11 +1,107 @@
-@import 'tailwindcss';
-
-@import './../../../packages/ui/build/css/source/global.css';
-@import './../../../packages/ui/build/css/themes/dark.css';
+@import 'config/tailwind.config.css';
 @import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
-@import './../../../packages/ui/build/css/themes/light.css';
 
-@config '../tailwind.config.js';
+@source '../_blog/*.mdx';
+@source '../components/**/*.tsx';
+@source '../data/**/*.tsx';
+@source '../layouts/**/*.tsx';
+@source '../lib/mdx/mdxComponents.tsx';
+@source '../pages/**/*.{tsx,mdx}';
+@source '../app/**/*.{tsx,ts,js}';
+@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
+@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
+@source './../../../packages/marketing/src/**/*.{tsx,ts,js}';
+
+@theme {
+  --color-purple-sos-100: hsl(293 80% 97%);
+  --color-purple-sos-200: hsl(293 85% 91%);
+  --color-purple-sos-300: hsl(293 90% 80%);
+  --color-purple-sos-400: hsl(293 95% 67%);
+  --color-purple-sos-500: hsl(293 100% 54%);
+  --color-purple-sos-600: hsl(293 100% 44%);
+  --color-purple-sos-700: hsl(293 100% 34%);
+  --color-purple-sos-800: hsl(293 95% 22%);
+  --color-purple-sos-900: hsl(293 90% 12%);
+
+  --animate-flash-code: flash-code 1s forwards;
+  --animate-flash-code-slow: flash-code 2s forwards;
+  --animate-spinner: spinner 1s both infinite;
+  --animate-marquee: marquee 35s linear infinite;
+  --animate-marquee-vertical: marquee-vertical 180s linear infinite both;
+  --animate-pulse-radar: pulse-radar 3s linear infinite;
+  --animate-slide-in: slideIn 250ms ease-in both;
+
+  --delay-1200: 1200ms;
+  --delay-1500: 1500ms;
+}
+
+@keyframes flash-code {
+  0% {
+    background-color: rgba(63, 207, 142, 0.1);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes marquee-vertical {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes pulse-radar {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(100%);
+    opacity: 0;
+  }
+}
 
 @layer base {
   *,
@@ -62,16 +158,9 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* h1,
-h2,
-h3,
-h4,
-h5,
-h6 { */
 /*
-  Typography
-*/
-
+ * Typography
+ */
 .h1:not(.prose *):not(.overwrite),
 .h2:not(.prose *):not(.overwrite),
 .h3:not(.prose *):not(.overwrite),
@@ -271,10 +360,8 @@ table {
 }
 
 /*
-* sets the image in @Next/Image components
-* to respect the height of the content
-*
-*/
+ * sets the image in @Next/Image components to respect the height of the content
+ */
 .next-image--dynamic-fill {
   display: block;
   width: 100%;
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
deleted file mode 100644
index 8c904d9f313..00000000000
--- a/apps/www/tailwind.config.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const config = require('config/tailwind.config')
-
-module.exports = config({
-  content: [
-    './_blog/*.mdx',
-    './components/**/*.tsx',
-    './data/**/*.tsx',
-    './layouts/**/*.tsx',
-    './lib/mdx/mdxComponents.tsx',
-    './pages/**/*.{tsx,mdx}',
-    './app/**/*.{tsx,ts,js}',
-    './../../packages/ui/src/**/*.{tsx,ts,js}',
-    './../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
-    './../../packages/marketing/src/**/*.{tsx,ts,js}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'purple-sos': {
-          100: 'hsl(293 80% 97%)',
-          200: 'hsl(293 85% 91%)',
-          300: 'hsl(293 90% 80%)',
-          400: 'hsl(293 95% 67%)',
-          500: 'hsl(293 100% 54%)',
-          600: 'hsl(293 100% 44%)',
-          700: 'hsl(293 100% 34%)',
-          800: 'hsl(293 95% 22%)',
-          900: 'hsl(293 90% 12%)',
-        },
-      },
-      keyframes: {
-        'flash-code': {
-          '0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
-          '100%': { backgroundColor: 'transparent' },
-        },
-        slideIn: {
-          '0%': { transform: 'translate3d(0,-100%,0)' },
-          '100%': { transform: 'translate3d(0,0,0)' },
-        },
-        spinner: {
-          '0%': {
-            transform: 'rotate(0deg)',
-          },
-          '100%': {
-            transform: 'rotate(360deg)',
-          },
-        },
-        marquee: {
-          '0%': { transform: 'translateX(0%)' },
-          '100%': { transform: 'translateX(-100%)' },
-        },
-        'marquee-reverse': {
-          '0%': { transform: 'translateX(-100%)' },
-          '100%': { transform: 'translateX(0%)' },
-        },
-        'marquee-vertical': {
-          '0%': { transform: 'translateY(0%)' },
-          '100%': { transform: 'translateY(-100%)' },
-        },
-        'pulse-radar': {
-          '0%': { transform: 'scale(0)', opacity: 0 },
-          '50%': { opacity: 0.8 },
-          '100%': { transform: 'scale(100%)', opacity: 0 },
-        },
-      },
-      animation: {
-        'flash-code': 'flash-code 1s forwards',
-        'flash-code-slow': 'flash-code 2s forwards',
-        spinner: 'spinner 1s both infinite',
-        marquee: 'marquee 35s linear infinite',
-        'marquee-vertical': 'marquee-vertical 180s linear infinite both',
-        'pulse-radar': 'pulse-radar 3s linear infinite',
-        'slide-in': 'slideIn 250ms ease-in both',
-      },
-      transitionDelay: {
-        1200: '1200ms',
-        1500: '1500ms',
-      },
-    },
-  },
-})
diff --git a/packages/config/tailwind.config.css b/packages/config/tailwind.config.css
new file mode 100644
index 00000000000..e773125bea8
--- /dev/null
+++ b/packages/config/tailwind.config.css
@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import '../ui/build/css/source/global.css';
+@import '../ui/build/css/themes/dark.css';
+@import '../ui/build/css/themes/light.css';
+@import './unset-tw-colors.css';
+@config './tailwind.config.js';
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index f5b30440064..a32b36e179a 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -446,22 +446,4 @@ const uiConfig = ui({
   ],
 })
 
-function arrayMergeFn(destinationArray, sourceArray) {
-  return destinationArray.concat(sourceArray).reduce((acc, cur) => {
-    if (acc.includes(cur)) return acc
-    return [...acc, cur]
-  }, [])
-}
-
-/**
- * Merge Supabase UI and Tailwind CSS configurations
- * @param {object} tailwindConfig - Tailwind config object
- * @return {object} new config object
- */
-function wrapper(tailwindConfig) {
-  return deepMerge({ ...tailwindConfig }, uiConfig, {
-    arrayMerge: arrayMergeFn,
-  })
-}
-
-module.exports = wrapper
+module.exports = uiConfig
diff --git a/packages/config/unset-tw-colors.css b/packages/config/unset-tw-colors.css
new file mode 100644
index 00000000000..8d380399b7f
--- /dev/null
+++ b/packages/config/unset-tw-colors.css
@@ -0,0 +1,42 @@
+/* 
+ * This file unsets all built-in Tailwind CSS colors for which we have overrides. Some of them might not exist in 
+ * Tailwind's default theme. 
+ */
+@theme {
+  --color-amber-*: initial;
+  --color-amberA-*: initial;
+  --color-blackA-*: initial;
+  --color-blue-*: initial;
+  --color-blueA-*: initial;
+  --color-crimson-*: initial;
+  --color-crimsonA-*: initial;
+  --color-gold-*: initial;
+  --color-goldA-*: initial;
+  --color-gray-*: initial;
+  --color-grayA-*: initial;
+  --color-green-*: initial;
+  --color-greenA-*: initial;
+  --color-indigo-*: initial;
+  --color-indigoA-*: initial;
+  --color-orange-*: initial;
+  --color-orangeA-*: initial;
+  --color-pink-*: initial;
+  --color-pinkA-*: initial;
+  --color-purple-*: initial;
+  --color-purpleA-*: initial;
+  --color-red-*: initial;
+  --color-redA-*: initial;
+  --color-slate-*: initial;
+  --color-slateA-*: initial;
+  --color-tomato-*: initial;
+  --color-tomatoA-*: initial;
+  --color-violet-*: initial;
+  --color-violetA-*: initial;
+  --color-whiteA-*: initial;
+  --color-yellow-*: initial;
+  --color-yellowA-*: initial;
+  --color-scale-*: initial;
+  --color-scale-fixed-*: initial;
+  --color-scaleA-*: initial;
+  --color-scaleA-fixed-*: initial;
+}