diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index e6c4f02ef17..a7d6c82e2dd 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -1,5 +1,5 @@
 import '@/styles/globals.css'
-import '../../studio/styles/typography.scss'
+import '../../studio/styles/typography.css'
 
 import type { Metadata, Viewport } from 'next'
 
diff --git a/apps/design-system/postcss.config.cjs b/apps/design-system/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/design-system/postcss.config.cjs
+++ b/apps/design-system/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index fbde324a0a4..e470d95e69b 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,9 +1,9 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import 'ui-patterns/ShimmeringLoader/index.css'
-import '../styles/main.scss'
-import '../styles/new-docs.scss'
-import '../styles/prism-okaidia.scss'
+import '../styles/main.css'
+import '../styles/new-docs.css'
+import '../styles/prism-okaidia.css'
 
 import { GlobalProviders } from '~/features/app.providers'
 import { TopNavSkeleton } from '~/layouts/MainSkeleton'
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.css
similarity index 87%
rename from apps/docs/styles/main.scss
rename to apps/docs/styles/main.css
index 02fc3958d64..48534b2397d 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.css
@@ -43,14 +43,14 @@ body {
   color: #333 !important;
 }
 
-// a {
-//   text-decoration: none !important;
-// }
+/* a { */
+/*   text-decoration: none !important; */
+/* } */
 
 article h1 {
-  // margin-bottom: 2rem !important;
-  // font-size: 3rem !important;
-  // font-weight: 400 !important;
+  /* margin-bottom: 2rem !important; */
+  /* font-size: 3rem !important; */
+  /* font-weight: 400 !important; */
 }
 
 .thin-scrollbar {
@@ -91,8 +91,8 @@ pre[class*='language-'] {
   text-shadow: none !important;
 }
 
-// Spec doc specifics ported from docusaurus
-// @TODO these should be converted to Tailwind classes
+/* Spec doc specifics ported from docusaurus */
+/* @TODO these should be converted to Tailwind classes */
 
 .method-list-item {
   @apply border-t border-gray-400;
@@ -157,18 +157,18 @@ pre[class*='language-'] {
   margin-bottom: 4px;
 }
 
-// These should move to their own components
-// wasn't able to get an import path working
+/* These should move to their own components */
+/* wasn't able to get an import path working */
 .parent-menu-toggle.active {
   svg {
     transform: rotate(90deg);
   }
 }
 
-// ToC styles
-// .toc__menu-item--active {
-//   color: hsl(var(--brand-default)) !important;
-// }
+/* ToC styles */
+/* .toc__menu-item--active { */
+/*   color: hsl(var(--brand-default)) !important; */
+/* } */
 
 .video-container {
   position: relative;
@@ -189,7 +189,7 @@ pre[class*='language-'] {
   @apply m-0;
 }
 
-// format <code> inside <p>
+/* format <code> inside <p> */
 h2 code,
 h3 code,
 h4 code {
@@ -205,7 +205,7 @@ h4 code {
   }
 }
 
-// code inside admonitions
+/* code inside admonitions */
 .admonition-content p code {
   @apply bg-control;
   word-break: keep-all !important;
@@ -216,13 +216,13 @@ article p strong {
   color: inherit !important;
 }
 
-// fix box shadow when <code> is inside <a>
+/* fix box shadow when <code> is inside <a> */
 a:has(code) {
   box-shadow: none !important;
 }
 
-// fix code line wrapping
-// need to set this to happen from medium onwards, otherwise the would cause horizontal scroll
+/* fix code line wrapping */
+/* need to set this to happen from medium onwards, otherwise the would cause horizontal scroll */
 article p code {
   &::before,
   &::after {
@@ -237,12 +237,12 @@ article p code {
   }
 }
 
-// fix firefox issue with li wrapping
+/* fix firefox issue with li wrapping */
 .doc-content-container ul li div.relative {
   display: inline-block;
 }
 
-// fix ToC links when they have <code> inside
+/* fix ToC links when they have <code> inside */
 .toc-menu li a code {
   background: none;
   border: none;
@@ -317,12 +317,12 @@ th code {
   @apply not-sr-only;
 }
 
-// Code blocks need margin applied when in content container
+/* Code blocks need margin applied when in content container */
 .prose :where(.shiki:not(.shiki-wrapper *), .shiki-wrapper) {
   margin-block: 2rem;
 }
 
-// Code block theme colors for use with Supabase Theme
+/* Code block theme colors for use with Supabase Theme */
 [data-theme='dark'],
 [data-theme='deep-dark'],
 .dark,
diff --git a/apps/docs/styles/new-docs.css b/apps/docs/styles/new-docs.css
new file mode 100644
index 00000000000..6f3047bab95
--- /dev/null
+++ b/apps/docs/styles/new-docs.css
@@ -0,0 +1,22 @@
+/* overwrite for typography */
+
+/* .prose ul { */
+/*   li { */
+/*     position: relative; */
+/*   } */
+/*   li::before { */
+/*     position: absolute; */
+/*     top: 0.75rem; */
+/*     left: -1rem; */
+/*     height: 0.125rem; */
+/*     width: 0.5rem; */
+/*     border-radius: 0.25rem; */
+/*     background-color: var(--colors-scale9); */
+/*     opacity: 0.6; */
+/*     content: ''; */
+/*   } */
+/* } */
+
+/* article { */
+/*   background: yellow !important; */
+/* } */
diff --git a/apps/docs/styles/new-docs.scss b/apps/docs/styles/new-docs.scss
deleted file mode 100644
index 10591acd3d6..00000000000
--- a/apps/docs/styles/new-docs.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// overwrite for typography
-
-// .prose ul {
-//   li {
-//     position: relative;
-//   }
-//   li::before {
-//     position: absolute;
-//     top: 0.75rem;
-//     left: -1rem;
-//     height: 0.125rem;
-//     width: 0.5rem;
-//     border-radius: 0.25rem;
-//     background-color: var(--colors-scale9);
-//     opacity: 0.6;
-//     content: '';
-//   }
-// }
-
-// article {
-//   background: yellow !important;
-// }
diff --git a/apps/docs/styles/prism-okaidia.scss b/apps/docs/styles/prism-okaidia.css
similarity index 100%
rename from apps/docs/styles/prism-okaidia.scss
rename to apps/docs/styles/prism-okaidia.css
diff --git a/apps/docs/types/assets.d.ts b/apps/docs/types/assets.d.ts
deleted file mode 100644
index 70be4aae409..00000000000
--- a/apps/docs/types/assets.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
diff --git a/apps/learn/postcss.config.cjs b/apps/learn/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/learn/postcss.config.cjs
+++ b/apps/learn/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index d753533394f..41d6d04fb9d 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -1,19 +1,19 @@
 import 'react-data-grid/lib/styles.css'
-import '@/styles/code.scss'
-import '@/styles/editor.scss'
-import '@/styles/focus.scss'
-import '@/styles/graphiql-base.scss'
-import '@/styles/grid.scss'
-import '@/styles/main.scss'
-import '@/styles/markdown-preview.scss'
-import '@/styles/monaco.scss'
-import '@/styles/react-data-grid-logs.scss'
-import '@/styles/reactflow.scss'
-import '@/styles/storage.scss'
-import '@/styles/stripe.scss'
-import '@/styles/toast.scss'
-import '@/styles/typography.scss'
-import '@/styles/ui.scss'
+import '@/styles/code.css'
+import '@/styles/editor.css'
+import '@/styles/focus.css'
+import '@/styles/graphiql-base.css'
+import '@/styles/grid.css'
+import '@/styles/main.css'
+import '@/styles/markdown-preview.css'
+import '@/styles/monaco.css'
+import '@/styles/react-data-grid-logs.css'
+import '@/styles/reactflow.css'
+import '@/styles/storage.css'
+import '@/styles/stripe.css'
+import '@/styles/toast.css'
+import '@/styles/typography.css'
+import '@/styles/ui.css'
 import 'ui-patterns/ShimmeringLoader/index.css'
 import 'ui/build/css/themes/dark.css'
 import 'ui/build/css/themes/light.css'
diff --git a/apps/studio/postcss.config.cjs b/apps/studio/postcss.config.cjs
new file mode 100644
index 00000000000..29c447cb54b
--- /dev/null
+++ b/apps/studio/postcss.config.cjs
@@ -0,0 +1 @@
+module.exports = require('config/postcss.config')
diff --git a/apps/studio/postcss.config.js b/apps/studio/postcss.config.js
deleted file mode 100644
index 2259daa8a9d..00000000000
--- a/apps/studio/postcss.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable no-restricted-exports */
-/* eslint-disable import/no-anonymous-default-export */
-
-export default {
-  plugins: {
-    tailwindcss: {},
-  },
-}
diff --git a/apps/studio/styles/code.scss b/apps/studio/styles/code.css
similarity index 86%
rename from apps/studio/styles/code.scss
rename to apps/studio/styles/code.css
index 6bc7f701e15..d536fbc52e5 100644
--- a/apps/studio/styles/code.scss
+++ b/apps/studio/styles/code.css
@@ -7,7 +7,7 @@
     white-space: normal;
     word-break: break-word;
 
-    // overflow: auto !important;
+    /* overflow: auto !important; */
   }
 
   .token-line {
@@ -16,13 +16,13 @@
 
   .token.imports,
   .token.property-access {
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.keyword.module,
   .token.function {
     font-style: normal !important;
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.plain,
@@ -35,32 +35,32 @@
   .token.doc-comment.parameter.punctuation,
   .token.doc-comment.optional-parameter.punctuation {
     font-style: normal !important;
-    @apply text-foreground-light #{!important};
+    @apply text-foreground-light !important;
   }
 
   .token.keyword,
   .token.doc-comment.keyword {
     font-style: normal !important;
-    @apply text-blue-900 #{!important};
+    @apply text-blue-900 !important;
   }
 
   .token.string {
     font-style: normal !important;
-    @apply text-brand #{!important};
+    @apply text-brand !important;
   }
 
   .token.constant {
     font-style: normal !important;
-    @apply text-blue-900 #{!important};
+    @apply text-blue-900 !important;
   }
 
   .token.comment {
     font-style: normal !important;
-    @apply text-foreground-lighter #{!important};
+    @apply text-foreground-lighter !important;
   }
 
   .token.number {
-    @apply text-brand #{!important};
+    @apply text-brand !important;
   }
 
   .token.boolean,
@@ -134,7 +134,7 @@
   }
 
   .code-header {
-    // @apply bg-gray-600;
+    /* @apply bg-gray-600; */
     color: #ccc;
     padding: 5px 15px;
     border-radius: 4px 4px 0 0;
diff --git a/apps/studio/styles/editor.scss b/apps/studio/styles/editor.css
similarity index 88%
rename from apps/studio/styles/editor.scss
rename to apps/studio/styles/editor.css
index a863b40cafc..3b8df53f55a 100644
--- a/apps/studio/styles/editor.scss
+++ b/apps/studio/styles/editor.css
@@ -18,7 +18,7 @@
   @apply opacity-50;
 }
 
-// This fix should ideally be in the UI library
+/* This fix should ideally be in the UI library */
 .table-editor-search {
   input {
     @apply pr-10;
diff --git a/apps/studio/styles/focus.scss b/apps/studio/styles/focus.css
similarity index 100%
rename from apps/studio/styles/focus.scss
rename to apps/studio/styles/focus.css
diff --git a/apps/studio/styles/graphiql-base.scss b/apps/studio/styles/graphiql-base.css
similarity index 100%
rename from apps/studio/styles/graphiql-base.scss
rename to apps/studio/styles/graphiql-base.css
diff --git a/apps/studio/styles/grid.scss b/apps/studio/styles/grid.css
similarity index 96%
rename from apps/studio/styles/grid.scss
rename to apps/studio/styles/grid.css
index ee0dfa861e4..db17000aee1 100644
--- a/apps/studio/styles/grid.scss
+++ b/apps/studio/styles/grid.css
@@ -19,7 +19,7 @@
   line-height: inherit;
 }
 
-// Apply parent bg colour while editing
+/* Apply parent bg colour while editing */
 .rdg-cell.rdg-editor-container > * {
   background-color: inherit;
 }
@@ -36,13 +36,13 @@
   box-shadow: inset 0 0 0 1px #24b47e;
 }
 
-// Cell with unsaved changes - warning (amber) background/text color
+/* Cell with unsaved changes - warning (amber) background/text color */
 .rdg-cell.rdg-cell--dirty {
   background-color: hsl(var(--warning-300) / 0.75);
   color: hsl(var(--warning-default));
 }
 
-// Row pending addition - green background, green text
+/* Row pending addition - green background, green text */
 .rdg-row.rdg-row--added {
   background-color: hsl(var(--brand-200) / 0.3);
 
@@ -55,13 +55,13 @@
     color: hsl(var(--brand-link));
   }
 
-  // First cell gets a stronger left border to indicate new row
+  /* First cell gets a stronger left border to indicate new row */
   .rdg-cell:first-child {
     box-shadow: inset 2px 0 0 0 hsl(var(--brand-default));
   }
 }
 
-// Row pending deletion - red background with strikethrough effect, red text
+/* Row pending deletion - red background with strikethrough effect, red text */
 .rdg-row.rdg-row--deleted {
   background-color: hsl(var(--destructive-300) / 0.3);
 
@@ -76,7 +76,7 @@
     color: hsl(var(--destructive-default));
   }
 
-  // First cell gets a stronger left border to indicate deleted row
+  /* First cell gets a stronger left border to indicate deleted row */
   .rdg-cell:first-child {
     box-shadow: inset 2px 0 0 0 hsl(var(--destructive-default));
   }
diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.css
similarity index 95%
rename from apps/studio/styles/main.scss
rename to apps/studio/styles/main.css
index 95c54aac3e5..d432650736e 100644
--- a/apps/studio/styles/main.scss
+++ b/apps/studio/styles/main.css
@@ -1,10 +1,10 @@
-@tailwind components;
-
 @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 './../../../packages/ui/build/css/themes/classic-dark.css';
 
+@tailwind components;
+
 :root {
   --chart-1: var(--brand-default);
   --chart-2: 173 58% 39%;
@@ -89,7 +89,7 @@ input.form-control,
 .form-control textarea {
   @apply block;
   @apply box-border;
-  // @apply  w-full ;
+  /* @apply  w-full ; */
   @apply rounded-md;
   @apply shadow-sm;
   @apply transition-all;
@@ -133,7 +133,7 @@ input.form-control,
   box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
 }
 
-// icons in date / time inputs
+/* icons in date / time inputs */
 .dark input[type='date']::-webkit-calendar-picker-indicator,
 .dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
 .dark input[type='time']::-webkit-calendar-picker-indicator {
@@ -193,7 +193,7 @@ input[type='number'] {
   -moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
 }
 
-// TODO: It doesnt' work, need to check
+/* TODO: It doesnt' work, need to check */
 .hide-scrollbar {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -262,9 +262,9 @@ div[data-radix-portal]:not(.portal--toast) {
   }
 }
 
-// to do: remove this CSS and do the same thing in a reusable tooltip component
+/* to do: remove this CSS and do the same thing in a reusable tooltip component */
 [data-radix-popper-content-wrapper] {
-  @apply z-50 #{!important};
+  @apply z-50 !important;
 }
 
 .settings-container {
@@ -272,7 +272,7 @@ div[data-radix-portal]:not(.portal--toast) {
 }
 
 .react-grid-item.react-grid-placeholder {
-  @apply bg-brand-500 #{!important};
+  @apply bg-brand-500 !important;
 }
 
 .react-grid-item > .react-resizable-handle::after {
@@ -282,7 +282,7 @@ div[data-radix-portal]:not(.portal--toast) {
   bottom: 3px !important;
   width: 6px !important;
   height: 6px !important;
-  @apply border-strong dark:border-r-2 dark:border-b-2 dark:border-overlay #{!important};
+  @apply border-strong dark:border-r-2 dark:border-b-2 dark:border-overlay !important;
 }
 
 @keyframes typewriter {
diff --git a/apps/studio/styles/markdown-preview.scss b/apps/studio/styles/markdown-preview.css
similarity index 99%
rename from apps/studio/styles/markdown-preview.scss
rename to apps/studio/styles/markdown-preview.css
index 07e97c62972..343fdd0d644 100644
--- a/apps/studio/styles/markdown-preview.scss
+++ b/apps/studio/styles/markdown-preview.css
@@ -1,4 +1,4 @@
-// [Joshen] https://github.com/sindresorhus/github-markdown-css
+/* [Joshen] https://github.com/sindresorhus/github-markdown-css */
 
 @media (prefers-color-scheme: dark) {
   .markdown-body,
@@ -118,8 +118,9 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
diff --git a/apps/studio/styles/monaco.scss b/apps/studio/styles/monaco.css
similarity index 100%
rename from apps/studio/styles/monaco.scss
rename to apps/studio/styles/monaco.css
diff --git a/apps/studio/styles/react-data-grid-logs.scss b/apps/studio/styles/react-data-grid-logs.css
similarity index 92%
rename from apps/studio/styles/react-data-grid-logs.scss
rename to apps/studio/styles/react-data-grid-logs.css
index 5274dc6b14d..e1d543976ed 100644
--- a/apps/studio/styles/react-data-grid-logs.scss
+++ b/apps/studio/styles/react-data-grid-logs.css
@@ -33,7 +33,7 @@
 
     &.rdg-row--focused .rdg-cell,
     &.rdg-row--focused .rdg-cell span {
-      @apply text-foreground #{!important};
+      @apply text-foreground !important;
     }
   }
 }
@@ -48,7 +48,7 @@
 
   .rdg-cell,
   .rdg-cell span {
-    @apply text-foreground-light font-normal #{!important};
+    @apply text-foreground-light font-normal !important;
     overflow: visible;
     text-overflow: clip;
   }
@@ -73,7 +73,7 @@
 
     &.rdg-row--focused .rdg-cell,
     &.rdg-row--focused .rdg-cell span {
-      @apply text-foreground-light font-semibold #{!important};
+      @apply text-foreground-light font-semibold !important;
     }
   }
 }
diff --git a/apps/studio/styles/reactflow.scss b/apps/studio/styles/reactflow.css
similarity index 100%
rename from apps/studio/styles/reactflow.scss
rename to apps/studio/styles/reactflow.css
diff --git a/apps/studio/styles/storage.scss b/apps/studio/styles/storage.css
similarity index 85%
rename from apps/studio/styles/storage.scss
rename to apps/studio/styles/storage.css
index d6368c40fae..ac143a4c4fe 100644
--- a/apps/studio/styles/storage.scss
+++ b/apps/studio/styles/storage.css
@@ -35,10 +35,10 @@
   }
 }
 
-// May need to just comment this out, the smooth scrolling looks weird
-// .file-explorer {
-// scroll-behavior: smooth;
-// }
+/* May need to just comment this out, the smooth scrolling looks weird */
+/* .file-explorer { */
+/* scroll-behavior: smooth; */
+/* } */
 
 .storage-row:hover,
 button[aria-haspopup='menu'][data-state='open'],
diff --git a/apps/studio/styles/stripe.scss b/apps/studio/styles/stripe.css
similarity index 95%
rename from apps/studio/styles/stripe.scss
rename to apps/studio/styles/stripe.css
index 13ed536ab87..967e2ead485 100644
--- a/apps/studio/styles/stripe.scss
+++ b/apps/studio/styles/stripe.css
@@ -1,4 +1,4 @@
-// stylesheet pertaining specifically to Stripe elements
+/* stylesheet pertaining specifically to Stripe elements */
 
 @keyframes fade {
   from {
diff --git a/apps/studio/styles/toast.scss b/apps/studio/styles/toast.css
similarity index 99%
rename from apps/studio/styles/toast.scss
rename to apps/studio/styles/toast.css
index 4463dff48b1..ff58b9897e8 100644
--- a/apps/studio/styles/toast.scss
+++ b/apps/studio/styles/toast.css
@@ -88,7 +88,7 @@
   background: #3498db;
 }
 .Toastify__toast--success {
-  // background: #07bc0c;
+  /* background: #07bc0c; */
   @apply bg-green-600;
 }
 .Toastify__toast--warning {
diff --git a/apps/studio/styles/typography.scss b/apps/studio/styles/typography.css
similarity index 93%
rename from apps/studio/styles/typography.scss
rename to apps/studio/styles/typography.css
index 0f2d5569a77..f02a2e4ffcb 100644
--- a/apps/studio/styles/typography.scss
+++ b/apps/studio/styles/typography.css
@@ -79,7 +79,7 @@
     @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
   }
 
-  // Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline">
+  /* Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline"> */
   .text-code-inline {
     @apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-md px-1 py-0.5 text-foreground font-medium;
   }
diff --git a/apps/studio/styles/ui.scss b/apps/studio/styles/ui.css
similarity index 96%
rename from apps/studio/styles/ui.scss
rename to apps/studio/styles/ui.css
index f0f37298fec..1b118e74e12 100644
--- a/apps/studio/styles/ui.scss
+++ b/apps/studio/styles/ui.css
@@ -26,7 +26,7 @@
   flex-wrap: wrap;
 }
 
-// TO DO: REMOVE
+/* TO DO: REMOVE */
 .form-group label {
   @apply inline-block text-foreground-light text-sm py-2;
   width: 33%;
@@ -203,11 +203,11 @@
     );
   }
 
-  // h1,
-  // h2,
-  // h3 {
-  //   @apply p-4 m-0;
-  // }
+  /* h1, */
+  /* h2, */
+  /* h3 { */
+  /*   @apply p-4 m-0; */
+  /* } */
 
   .doc-heading {
     @apply text-foreground capitalize mt-4 px-6 w-1/2;
@@ -257,9 +257,9 @@
     @apply p-4 px-6 w-1/2;
     max-width: 50%;
 
-    // a:not(.btn-primary):not(.btn-secondary) {
-    //   @apply text-green-500;
-    // }
+    /* a:not(.btn-primary):not(.btn-secondary) { */
+    /*   @apply text-green-500; */
+    /* } */
 
     a {
       @apply transition;
@@ -340,14 +340,14 @@
     display: none !important;
   }
 
-  // for Firefox
-  scrollbar-width: none; // auto | thin | none | <length>;
+  /* for Firefox */
+  scrollbar-width: none; /* auto | thin | none | <length>; */
 }
 
 .radix-tooltip-arrow {
   polygon {
     @apply fill-background-alternative [[data-theme*=dark]_&]:fill-background-alternative;
-    // fill: #eeeeee;
+    /* fill: #eeeeee; */
   }
 }
 
diff --git a/apps/studio/types/assets.d.ts b/apps/studio/types/assets.d.ts
deleted file mode 100644
index 70be4aae409..00000000000
--- a/apps/studio/types/assets.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
diff --git a/apps/ui-library/postcss.config.cjs b/apps/ui-library/postcss.config.cjs
index 08a01d4d167..29c447cb54b 100644
--- a/apps/ui-library/postcss.config.cjs
+++ b/apps/ui-library/postcss.config.cjs
@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-}
+module.exports = require('config/postcss.config')
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 7ba2db492c7..28e9de0241c 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,5 +1,5 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import '../styles/index.css'
 
 import { Metadata } from 'next'
diff --git a/apps/www/components/CodeBlock/CodeBlock.utils.js b/apps/www/components/CodeBlock/CodeBlock.utils.js
index 4a3da382c65..797a51f0a64 100644
--- a/apps/www/components/CodeBlock/CodeBlock.utils.js
+++ b/apps/www/components/CodeBlock/CodeBlock.utils.js
@@ -229,7 +229,7 @@ const monokaiCustomTheme = {
   },
 }
 
-// CodeHike theme based on the colors from code-hike.scss
+// CodeHike theme based on the colors from code-hike.css
 const codeHikeTheme = {
   dark: {
     hljs: {
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 8125ced851e..f6f1e20afdb 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -1,5 +1,5 @@
 import '@code-hike/mdx/styles.css'
-import 'config/code-hike.scss'
+import 'config/code-hike.css'
 import '../styles/index.css'
 
 import {
diff --git a/apps/www/types/assets.d.ts b/apps/www/types/assets.d.ts
index edf306f1b44..fd92a54f0ce 100644
--- a/apps/www/types/assets.d.ts
+++ b/apps/www/types/assets.d.ts
@@ -3,11 +3,6 @@ declare module '*.css' {
   export default styles
 }
 
-declare module '*.scss' {
-  export const styles: Record<string, string>
-  export default styles
-}
-
 declare module 'swiper/css'
 declare module 'swiper/css/a11y'
 declare module 'swiper/css/navigation'
diff --git a/package.json b/package.json
index f1e3754fd8c..c92e579d3b9 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "prettier": "^3.8.0",
     "prettier-plugin-sql-cst": "^0.18.0",
     "rimraf": "^6.0.0",
-    "sass": "^1.72.0",
     "supabase": "^2.76.10",
     "supports-color": "^8.0.0",
     "tailwindcss": "catalog:",
diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.css
similarity index 95%
rename from packages/config/code-hike.scss
rename to packages/config/code-hike.css
index 97b97fee0ae..85997070341 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.css
@@ -16,7 +16,7 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  // --ch-16: hsl(var(--foreground-lighter));
+  /* --ch-16: hsl(var(--foreground-lighter)); */
   --ch-16: #2a2929;
   --ch-17: #264f78;
   --ch-18: #3794ff;
@@ -47,7 +47,7 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  // --ch-16: hsl(var(--foreground-lighter));
+  /* --ch-16: hsl(var(--foreground-lighter)); */
   --ch-16: #eeeeee;
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
@@ -69,8 +69,8 @@
   overflow: hidden;
   padding: 0 8px 8px;
   font-family: 'Courier New', Courier, monospace;
-  //   font-family: Ubuntu, Droid Sans, -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
-  // sans-serif;
+  /*   font-family: Ubuntu, Droid Sans, -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, */
+  /* sans-serif; */
 }
 .ch-code-wrapper {
   background-color: var(--ch-16) !important;
@@ -168,8 +168,8 @@
 .ch-code-browser {
   display: flex;
   height: 100%;
-  //   font-family: 'Courier New', Courier, monospace;
-  //   font-family: Ubuntu, Droid Sans, -apple-system;
+  /*   font-family: 'Courier New', Courier, monospace; */
+  /*   font-family: Ubuntu, Droid Sans, -apple-system; */
 }
 .ch-code-browser-sidebar {
   border-right: 1px solid;
@@ -268,7 +268,7 @@
   break-inside: avoid;
   --ch-title-bar-height: 32px;
   height: 100%;
-  //   border: 1px solid red;
+  /*   border: 1px solid red; */
 }
 .ch-editor-frame .ch-frame-title-bar {
   background-color: var(--ch-21) !important;
@@ -390,8 +390,8 @@
   flex-shrink: 0;
   height: 1em;
   width: 4.16em;
-  //   display: flex;
-  display: none; // @mildtomato
+  /*   display: flex; */
+  display: none; /* @mildtomato */
 }
 .ch-frame-button {
   width: 1em;
@@ -622,8 +622,8 @@
   height: -webkit-max-content;
   height: -moz-max-content;
   height: max-content;
-  // box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3),
-  //   0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+  /* box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), */
+  /*   0 -6px 16px -6px rgba(0, 0, 0, 0.025); */
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
@@ -638,7 +638,7 @@
 .ch-codegroup {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
-  border: 1px solid hsl(var(--border-default)); // @mildtomato
+  border: 1px solid hsl(var(--border-default)); /* @mildtomato */
   box-shadow: none;
 }
 .ch-inline-code > code {
diff --git a/packages/config/postcss.config.js b/packages/config/postcss.config.js
index 08a01d4d167..74892551be5 100644
--- a/packages/config/postcss.config.js
+++ b/packages/config/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
+    autoprefixer: {},
   },
 }
diff --git a/packages/eslint-config-supabase/next.js b/packages/eslint-config-supabase/next.js
index 339e5bbcea1..8de68d8cb2c 100644
--- a/packages/eslint-config-supabase/next.js
+++ b/packages/eslint-config-supabase/next.js
@@ -86,6 +86,8 @@ module.exports = defineConfig([
       'app/**/*.tsx',
       'components/interfaces/**/content/**/content.tsx',
       'vitest.config.ts',
+      'postcss.config.js',
+      'postcss.config.cjs',
     ],
     rules: {
       'no-restricted-exports': [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1a8aae31df..bf3a8c26057 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,9 +135,6 @@ importers:
       rimraf:
         specifier: ^6.0.0
         version: 6.0.1
-      sass:
-        specifier: ^1.72.0
-        version: 1.72.0
       supabase:
         specifier: ^2.76.10
         version: 2.76.14(supports-color@8.1.1)
@@ -16902,11 +16899,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.72.0:
-    resolution: {integrity: sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   sass@1.77.4:
     resolution: {integrity: sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==}
     engines: {node: '>=14.0.0'}
@@ -31503,7 +31495,8 @@ snapshots:
 
   immutable@3.8.3: {}
 
-  immutable@4.3.8: {}
+  immutable@4.3.8:
+    optional: true
 
   import-fresh@3.3.0:
     dependencies:
@@ -36337,12 +36330,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.72.0:
-    dependencies:
-      chokidar: 3.6.0
-      immutable: 4.3.8
-      source-map-js: 1.2.1
-
   sass@1.77.4:
     dependencies:
       chokidar: 3.6.0