IT COMPILES IN VITE

app/soapbox/main.tsx

@@ -20,6 +20,7 @@ import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
 import 'react-datepicker/dist/react-datepicker.css';
 
 import '../soapbox/iframe';
+import '../styles/index.css';
 import '../styles/application.scss';
 
 import './precheck';

app/styles/application.scss

@@ -35,63 +35,6 @@
 @import 'components/crypto-donate';
 @import 'components/aliases';
 @import 'components/icon';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .break-word-nested > p {
-    word-break: break-word;
-  }
-
-  .shadow-inset {
-    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
-  }
-
-  .truncate-child > * {
-    @apply truncate;
-  }
-
-  .d-screen {
-    height: 100vh; // Backwards compatibility
-    /* stylelint-disable-next-line unit-no-unknown */
-    height: 100dvh;
-  }
-
-  .bg-gradient-light {
-    background: linear-gradient(
-      115deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 20%,
-      rgba(var(--color-gradient-start) / 0.1) 35%,
-      rgba(var(--color-gradient-end) / 0.1) 70%,
-      rgba(0, 0, 0, 0) 80%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  .bg-gradient-dark {
-    background: linear-gradient(
-      115deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 30%,
-      rgba(var(--color-gradient-start) / 0.1) 45%,
-      rgba(var(--color-gradient-start) / 0.2) 55%,
-      rgba(0, 0, 0, 0) 70%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  .bg-gradient-sm {
-    background: linear-gradient(
-      112deg,
-      rgba(var(--color-gradient-start) / 0.1) 0%,
-      rgba(var(--color-gradient-end) / 0.1) 50%
-    );
-  }
-}
-
 @import 'forms';
 @import 'utilities';
 @import 'components/datepicker';

app/styles/index.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .break-word-nested > p {
+    word-break: break-word;
+  }
+
+  .shadow-inset {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
+  }
+
+  .truncate-child > * {
+    @apply truncate;
+  }
+
+  .d-screen {
+    height: 100vh; /* Backwards compatibility */
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: 100dvh;
+  }
+
+  .bg-gradient-light {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(var(--color-gradient-start) / 0.1) 35%,
+      rgba(var(--color-gradient-end) / 0.1) 70%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-dark {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(var(--color-gradient-start) / 0.1) 45%,
+      rgba(var(--color-gradient-start) / 0.2) 55%,
+      rgba(0, 0, 0, 0) 70%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-sm {
+    background: linear-gradient(
+      112deg,
+      rgba(var(--color-gradient-start) / 0.1) 0%,
+      rgba(var(--color-gradient-end) / 0.1) 50%
+    );
+  }
+}

postcss.config.cjs

@@ -1,4 +1,4 @@
-export default ({ env }) => ({
+module.exports = ({ env }) => ({
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

tailwind.config.cjs

@@ -1,7 +1,7 @@
-import { parseColorMatrix } from './tailwind/colors';
+const { parseColorMatrix } = require('./tailwind/colors.cjs');
 
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: ['./app/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './app/index.ejs'],
   darkMode: 'class',
   theme: {