Fixed tailwind issues

apps/webapp/server.ts

@@ -4,10 +4,9 @@ import compression from "compression";
 import morgan from "morgan";
 import { createRequestHandler as expressCreateRequestHandler } from "@remix-run/express";
 import { wrapExpressCreateRequestHandler } from "@sentry/remix";
-import { env } from "~/env.server";
 
 const createRequestHandler =
-  env.NODE_ENV === "production"
+  process.env.NODE_ENV === "production"
     ? wrapExpressCreateRequestHandler(expressCreateRequestHandler)
     : expressCreateRequestHandler;
 
@@ -15,7 +14,7 @@ const app = express();
 
 app.use((req, res, next) => {
   // helpful headers:
-  res.set("x-fly-region", env.FLY_REGION ?? "unknown");
+  res.set("x-fly-region", process.env.FLY_REGION ?? "unknown");
   res.set("Strict-Transport-Security", `max-age=${60 * 60 * 24 * 365 * 100}`);
 
   // /clean-urls/ -> /clean-urls
@@ -34,7 +33,7 @@ app.use((req, res, next) => {
 // learn more: https://fly.io/docs/getting-started/multi-region-databases/#replay-the-request
 app.all("*", function getReplayResponse(req, res, next) {
   const { method, path: pathname } = req;
-  const { PRIMARY_REGION, FLY_REGION } = env;
+  const { PRIMARY_REGION, FLY_REGION } = process.env;
 
   const isMethodReplayable = !["GET", "OPTIONS", "HEAD"].includes(method);
   const isReadOnlyRegion =
@@ -72,7 +71,7 @@ app.use(express.static("public", { maxAge: "1h" }));
 
 app.use(morgan("tiny"));
 
-const MODE = env.NODE_ENV;
+const MODE = process.env.NODE_ENV;
 const BUILD_DIR = path.join(process.cwd(), "build");
 
 app.all(
@@ -89,7 +88,7 @@ app.all(
       }
 );
 
-const port = env.REMIX_APP_PORT || 3000;
+const port = process.env.REMIX_APP_PORT || 3000;
 
 app.listen(port, () => {
   // require the built app so we're ready when the first request comes in

apps/webapp/tailwind.config.js

@@ -1,28 +1,26 @@
 /** @type {import('tailwindcss').Config} */
-import parentConfig, {
-  theme as _theme,
-} from "@apihero/tailwind-config/tailwind.config";
-import { slate, blue, purple } from "tailwindcss/colors";
+const parentConfig = require("@apihero/tailwind-config/tailwind.config");
+const colors = require("tailwindcss/colors");
 const midnightColors = {
   1000: "#030713",
 };
 const toxicColors = {
   500: "#41FF54",
 };
-export default {
+module.exports = {
   ...parentConfig,
   theme: {
-    ..._theme,
+    ...parentConfig._theme,
     extend: {
-      ..._theme.extend,
+      ...parentConfig.extend,
       colors: {
         midnight: midnightColors[1000],
         toxic: toxicColors[500],
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-background": `radial-gradient(${slate[800]} 0%,${midnightColors[1000]} 50%,  ${midnightColors[1000]} 100%)`,
-        "gradient-secondary": `linear-gradient(90deg, ${blue[600]} 0%, ${purple[500]} 100%)`,
+        "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%)`,
       },
     },
   },

config-packages/tailwind-config/tailwind.config.js

@@ -1,26 +1,25 @@
 /** @type {import('tailwindcss').Config} */
-import { blue, red } from "tailwindcss/colors";
+const colors = require("tailwindcss/colors");
 
-export const content = [
-  // app content
-  // "./src/**/*.{ts,jsx,tsx}",
-  "./app/**/*.{ts,jsx,tsx}",
-  // include packages if not transpiling
-  "../../packages/**/*.{ts,tsx}",
-];
-export const theme = {
-  extend: {
-    fontFamily: {
-      sans: ["Inter", "sans-serif"],
-      mono: ["Roboto Mono", "monospace"],
-    },
-    colors: {
-      brandblue: blue[500],
-      brandred: red[500],
+module.exports = {
+  content: [
+    // app content
+    // "./src/**/*.{ts,jsx,tsx}",
+    "./app/**/*.{ts,jsx,tsx}",
+    // include packages if not transpiling
+    "../../packages/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        mono: ["Roboto Mono", "monospace"],
+      },
+      colors: {
+        brandblue: colors.blue[500],
+        brandred: colors.red[500],
+      },
     },
   },
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
 };
-export const plugins = [
-  require("@tailwindcss/forms"),
-  require("@tailwindcss/typography"),
-];