Tidied up webapp tailwind config

apps/webapp/tailwind.config.js

@@ -1,31 +1,28 @@
 /** @type {import('tailwindcss').Config} */
-const parentConfig = require("@apihero/tailwind-config/tailwind.config");
-const colors = require('tailwindcss/colors')
+import parentConfig, {
+  theme as _theme,
+} from "@apihero/tailwind-config/tailwind.config";
+import { slate, blue, purple } from "tailwindcss/colors";
 const midnightColors = {
   1000: "#030713",
 };
-const toxicColors = { 
-  500: "#41FF54" 
+const toxicColors = {
+  500: "#41FF54",
 };
-module.exports = {
+export default {
   ...parentConfig,
   theme: {
-    ...parentConfig.theme,
+    ..._theme,
     extend: {
-      ...parentConfig.theme.extend,
-      height: {
-        mainMobileContainerHeight: "calc(100vh - 145px)",
-        mainDesktopContainerHeight: "calc(100vh - 65px)",
-        editEndpointContainerHeight: "calc(100vh - 112px)",
-      },
+      ..._theme.extend,
       colors: {
         midnight: midnightColors[1000],
         toxic: toxicColors[500],
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-background": `radial-gradient(${colors.slate[800]} 0%,${midnightColors[1000]} 50%,  ${midnightColors[1000]} 100%)`,
-        "gradient-secondary": `linear-gradient(90deg, ${colors.blue[600]} 0%, ${colors.purple[500]} 100%)`,
+        "gradient-background": `radial-gradient(${slate[800]} 0%,${midnightColors[1000]} 50%,  ${midnightColors[1000]} 100%)`,
+        "gradient-secondary": `linear-gradient(90deg, ${blue[600]} 0%, ${purple[500]} 100%)`,
       },
     },
   },